无法正确添加行 [英] unable to add rows properly

问题描述

无法正确添加多行.请按照以下步骤操作:

Unable to add multiple rows properly. Follow below steps:

1. 点击示例 Excel 表下载.
2. 导入同一工作表后，将显示所有数据.
3. 可以通过点击并更改列值来更新列值.

但是，当我添加更多行时，它会出现两次并且无法通过单击来更改其列值.

However When I add more rows, it appears twice and unable to change its column value by clicking on it.

即使在向其添加行之后.该行没有附加键，如下所示:

Even after adding rows to it. There is no key attached to that row as shown below:

在添加行之前:

添加行后:

Codesandbox 链接: https://codesandbox.io/s/github/abiodunsulaiman694/excel-app/tree/master/

推荐答案

如果您的对象数组没有唯一值(如 id)，您可以使用 nanoid 包，然后在您的地图函数中在 Excelenderer 函数中执行以下操作:

Instead of index and if your object array don't have unique value (like id) you can use the nanoid package and then in your map function do something like this in Excelenderer function :

  ExcelRenderer(fileObj, (err, resp) => {
      if (err) {
        console.log(err);
      } else {
        let newRows = [];
        resp.rows.slice(1).map((row) => {
          if (row && row !== "undefined") {
            newRows.push({
              key: nanoid(),
              name: row[0],
              age: row[1],
              gender: row[2]
            });
          }
        });

在handleAdd函数中:

and in handleAdd function:

 handleAdd = () => {
    const { count, rows } = this.state;
    const newData = {
      key: nanoid(),
      name: "User's name",
      age: "22",
      gender: "Female"
    };
    this.setState({
      rows: [newData, ...rows],
      count: count + 1
    });
  };

它将通过调用 nanoid 库中的 nanoid() 生成一个唯一的密钥.
小心
不要在渲染函数中使用 nanoid
就像 nanoid 文档中的解释:

it will generate an unique key by calling nanoid() from nanoid library.
carefull
don't use nanoid in render function
like explain in nanoid doc :

不要在 key 属性中调用 nanoid.在 React 中，key 应该是一致的在渲染中.

Do not call nanoid in the key prop. In React, key should be consistent among renders.

这是个坏例子:

/* 不要这样做 */

/* DON’T DO IT */

这里沙盒

这篇关于无法正确添加行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！