javascript - 列表中的每个孩子都应该有一个唯一的“关键”道具控制台警告

Question

代码在这里

   <React.Fragment>
    <div className="js-container">
      <div className="js-sidecontent">
        {[{ title: "Js, values: ["s1", "s2"]}].map((f_list) => (
          <div className="js-sidecontent-container" key={f_list.title}>
            <button className="feature-title">{f_list.title}</button>
            {f_list.values.map((f_list_value) => (
              <button className="feature-title-list">{f_list_value}</button>
            ))}
          </div>
        ))}
      </div>
    </div>
  </React.Fragment>

我在 React Component 的 render 方法中有上面的代码，并且我有 key-value 作为父 div 元素的属性。尽管如此，我仍然低于控制台中的错误。

警告：列表中的每个孩子都应该有一个唯一的“关键”道具。

如何解决？

标签： javascriptreactjs

Answer 1

您还需要key为按钮指定 a ：

{f_list.values.map((f_list_value, idx) => (
    <button className="feature-title-list" key={idx}>{f_list_value}</button>
))}