Javascript 反应：在阵列贴图中渲染额外组件

我是一名学生，对反应还不熟悉。我正在创建一个心智树，其中的组件使用数组进行渲染，最终会有自己的子元素。我遇到了这样一个问题，即渲染了（第一个子对象的）另一个重复的子对象。它只发生在三次之后，永远不会成为数据结构本身的一部分。我无法找到许多类似的问题张贴，如果你有任何想法，他们将非常感谢

displayChildren = () => {
        let num = 1;
        let childs = [];
        if(this.props.Data.Children == null)
            return;

        this.props.Data.Children.map(idea => { 
            childs.push(
                <td key = {'R-'+this.props.Data.Children.length}>
                    <Idea key={'I-'+this.props.Data.Children.length} Data={idea} pushToTop={this.pushToTop}/>
                </td>
            );
            console.log("Creating Child >"+ num++ +"< for "+this.props.Data.Title, childs);
        });

        console.log("FINISHED CHILDREN: ", childs);
        return(<tr align="center" valign="top">{childs}</tr>);
    }Picture: Two Children -> Working

displayChildren=（）=>{
设num=1；
让childs=[]；
if（this.props.Data.Children==null）
返回；
this.props.Data.Children.map（idea=>{
儿童推(
);
log（“创建子对象>”+num++“<用于“+this.props.Data.Title，childs”）；
});
日志（“完成的子项：”，child）；
返回（{childs}）；
}图片：两个孩子->工作

图片：两个子日志->数据中的两个子日志

图片：三个子->错误，重复渲染->显示四个子

注意：连接基于数组的大小，即三个，因此仅显示三个

图片：三个子日志->数据中的三个子

---

附加说明：我最终希望有多个用户，并计划使用Socket.IO通过替换树的头部/原点来来回传递当前数据。使用Sockets，它会将额外的组件呈现给用户，然后很快就会使浏览器崩溃。

键必须是唯一的，这在代码中不是唯一的。非唯一密钥可能会导致像您这样的奇怪行为。请为循环中的每个

生成一个唯一的密钥，它将解决您的问题

<td key = {'R-'+this.props.Data.Children.length}>

---

键必须是唯一的，这在您的代码中不是这样的。非唯一密钥可能会导致像您这样的奇怪行为。请为循环中的每个

生成一个唯一的密钥，它将解决您的问题

<td key = {'R-'+this.props.Data.Children.length}>

---

您的代码有很大的改进空间。我将从修改它开始，然后解释一些更改背后的原因

displayChildren = () => {
  if (!Array.isArray(this.props.Data.Children)) return;

  const childs = this.props.Data.Children.map((idea, i) => {
    console.log(`Creating Child >${i}< for ${this.props.Data.Title}`, this.props.Data.Children);
    return (
      <td key = {`R-${idea.Title}`}>
        <Idea Data={idea} pushToTop={this.pushToTop}/>
      </td>
    );
  });

  console.log("FINISHED CHILDREN: ", childs);
  return(<tr align="center" valign="top">{childs}</tr>);
}

displayChildren=（）=>{
如果（！Array.isArray（this.props.Data.Children））返回；
const childs=this.props.Data.childs.map（（idea，i）=>{
log（`Creating Child>${i}

如果上面的代码解决了这个问题，主要问题是您对所有

使用了相同的键，因为

这个.props.Data.Children.length

将始终是相同的-它不会随着

映射数组中的每个元素而改变

相反，我使用
idea.Title
为每个
构建了一个（希望是）唯一的键。您还可以使用
i
（缩写为
index
，这是
map
提供给回调函数的第二个参数，我也在内部
console.log
语句中使用了该参数），但在某些情况下可能会出现问题（例如，如果要在
this.props.Data.Children
数组中动态添加、删除或排序元素）

其他改进：

不要创建一个数组，然后在
map
内部将
推送到它。无论如何，在数组上进行映射会返回一个新数组，因此不需要推送到一个单独的数组


Idea
此处不需要唯一的键。只有
才需要

在尝试将
this.props.Data.Children
映射到它上面之前，我没有检查
this.props.Data.Children
是否等于
null
，而是检查它是否是一个数组。这样更安全，以防您意外地将
this.props.Data.Children
设置为非
null
或数组

还有进一步改进的余地，但这超出了本答案的范围。
您的代码还有很大的改进余地。我将从重新编写开始，然后解释一些更改背后的原因

displayChildren = () => {
  if (!Array.isArray(this.props.Data.Children)) return;

  const childs = this.props.Data.Children.map((idea, i) => {
    console.log(`Creating Child >${i}< for ${this.props.Data.Title}`, this.props.Data.Children);
    return (
      <td key = {`R-${idea.Title}`}>
        <Idea Data={idea} pushToTop={this.pushToTop}/>
      </td>
    );
  });

  console.log("FINISHED CHILDREN: ", childs);
  return(<tr align="center" valign="top">{childs}</tr>);
}

displayChildren=（）=>{
如果（！Array.isArray（this.props.Data.Children））返回；
const childs=this.props.Data.childs.map（（idea，i）=>{
log（`Creating Child>${i}

如果上面的代码解决了这个问题，主要问题是您对所有
使用了相同的键，因为
这个.props.Data.Children.length
将始终是相同的-它不会随着
映射数组中的每个元素而改变

相反，我使用
idea.Title
为每个
构建一个（希望是）唯一的键。您也可以使用
I
（缩写为
index
，这是
map
为回调函数提供的第二个参数，我也在内部
控制台.log
语句中使用了该参数），但在某些情况下可能会出现问题（例如，如果您在
this.props.Data.Children
数组中动态添加、删除或排序元素）

其他改进：

不要创建一个数组，然后在
map
内部将
推送到它。无论如何，在数组上进行映射会返回一个新数组，因此不需要推送到一个单独的数组


Idea
此处不需要唯一的键。只有
才需要

在尝试将
this.props.Data.Children
映射到它上面之前，我没有检查
this.props.Data.Children
是否等于
null
，而是检查它是否是一个数组。这样更安全，以防您意外地将
this.props.Data.Children
设置为非
null
或数组

有f房间