首页 文章

在React中使用相同键的两个孩子[重复]

提问于
浏览 次
0

这个问题在这里已有答案：

应用程序工作，我的类真的添加了一个新元素，但我在控制台中看到下面的警告！

警告：遇到两个具有相同键的子项，[object Object] . 密钥应该是唯一的，以便组件在更新时保持其身份 . 非唯一键可能导致子项被复制和/或省略 - 行为不受支持，并且可能在将来的版本中更改 . 在ContentBody中的div（由ContentBody创建）中

Here is my render part :

return (
            <div ref={this.myRef} style={this.state.myHomeStyle} >
              {this.state.elements.map((i: any) => {
                console.log(">>i>>>>", i);
                return <span style={i.myStyle} key={i} >{i}</span>;
              })}
            </div>
        );

// Where i init 
 public componentDidMount() {

    console.log('componentDidMount');
    this.myDOM  = this.myRef.current;
    this.myDOM.addEventListener(myEventsList.adaptCss, this.adaptCss);

    this.add(12,this.INLINE_TEST_ELE, null);
    this.add(13,this.INLINE_TEST_ELE, null);

  }


// Function add 
private add = (id: number, content: any, event: any ) => {

    let localArr: any[] = [];
    let mEvent: any = null;

    if (event !== undefined) {
      mEvent = event;
    }

    localArr = this.state.elements;
    localArr.push(React.createElement("div", { key: id , onClick : mEvent }, content));

    this.setState(
      {
        elements: localArr,
        visibility : true,
      },
    );

  }

有什么建议？

reactjs key add

3 回答

  • 0

    您可以在 Map 函数中传递另一个参数，如下所示：

    this.state.elements.map((element, index) => {
   return <span style={element.myStyle} key={index} >{element}</span>;
});

    Array.prototype.map 函数的第二个参数实际上包含该数组中特定元素的当前索引 .

    这样，您就可以确保您的密钥不会重复 .

    回复于
  • 1

    有关“关键”相关警告和最佳实践的更多理解，请参阅此处

    function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

    有关更多信息，请访问此链接https://reactjs.org/docs/lists-and-keys.html#extracting-components-with-keys

    回复于
  • 1

    你传递的元素不是索引 . 如果你的元素相同，那么就会抛出错误 . 要传递索引，请使用第二个参数：

    .map((element, index)=>

    现在，使用 index 将为您提供不同的密钥 .

    回复于

相关问题