Question

您如何映射功能组件中的键，恰好是'key'关键字，而不仅仅是通用索引？

我在一个功能组件中使用Map创建另一个元素的列表，但是当我使用'key'删除控制台时，警告代码中断。

我可以将随附的道具切换为“索引”并获取工作代码，但随后会收到警告，提示我列表中缺少“关键”索引。

提供的答案并未说明如何将“键”的特定情况（注意关键字“键”而不是常规索引）传递给功能组件。

// results in an undefined key ie: key=''
const ComponentOne = ({records}) => (
  {records.map( (record, index) => <ComponentTwo data={record} key={index}/>)}
);

const ComponentTwo = ({data, key}) =>
  <div key={key}>
    {data}
  </div>

// This method works but comes with the console warning for a 'missing key'
const ComponentOne = ({records}) => (
  {records.map( (record, index) => <ComponentTwo data={record} index={index}/>)}
);

const ComponentTwo = ({data, index}) =>
  <div key={index}>
    {data}
  </div>

https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

此链接还讨论了为什么将索引用作键是一种反模式，所以如果我使用“索引”，则违反了规则，但是功能组件不允许使用“键”，因为它是特殊的具有重要意义的关键字。

Answer 1

尝试类似的事情


    const ComponentOne = ({records}) => (
      <React.Fragment>
       {records.map( (record, index) => <ComponentTwo data={record} key={index}/>)}
      </React.Fragment>
    );

您还可以将records的唯一属性作为键传递，例如id或类似的东西。

功能性无状态组件和键

1 个答案: