无法正确添加行答案

【问题标题】：unable to add rows properly无法正确添加行
【发布时间】：2020-12-29 15:48:38
【问题描述】：

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

点击示例 Excel 表下载。
一旦导入同一张工作表，所有数据都会显示出来。
可以通过单击并更改列值来更新列值。

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

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

添加行之前：

添加行后：

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

【问题讨论】：

使用索引作为键不是一个好主意，请参阅这部分反应doc 或这个source
@antoineso 你能帮我解决我有问题的代码链接吗？我是新手。
你尝试在this.state = {}内部渲染，为什么会这样？
sandbox
@antoineso 感谢您的帮助。有效。你能不能快速解释一下你到底做了什么改变。我可以看到你用 nanoid 作为钥匙。你还用过别的什么吗？

标签： reactjs antd

【解决方案1】：

如果您的对象数组没有唯一值（如 id）而不是索引，您可以使用 nanoid 包，然后在您的地图函数中在 Excelenderer 函数中执行类似的操作：

  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函数中：

 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 文档中的解释一样：

不要在 key prop 中调用 nanoid。在 React 中，key 应该是一致的在渲染之间。

这是一个不好的例子：

/* 不要这样做 */

这里sandbox

【讨论】：