无法正确添加行 [英] 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)，则可以使用

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 doc中的解释:

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 :

请勿在关键道具中调用nanoid.在React中，密钥应该保持一致在渲染之间.

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

这是一个糟糕的例子:

/*不做*/

此处沙盒

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