javascript - 我可以使用映射函数的索引作为包含动态不可预测文本的 React 组件的键吗？

Question

我得到了这段代码，我将动态文本解析为单独的行，并为每行文本渲染单独的组件。

我使用 map 函数为元素创建一个数组，React 要求列表中的每个元素都有一个唯一的键。

我知道通常使用 index 作为键并不理想。但这种情况下，我还能做什么呢？

问题

在这种情况下，我可以使用 index 作为元素的 key 而不会出现问题吗？可能会出现什么问题？

注意1:我不能使用值作为键，因为所有行可能具有完全相同的值，因此它们不会是唯一的。

注2:此代码在 BlogPosts 的管理表单内运行。我编写了一些自定义标记文本，就像在 StackOverflow 上的问题文本区域中一样，我需要对其进行解析，以便在作为博客文章在屏幕上呈现时为其提供正确的样式。例如:**粗体文本**等。并且每一行都应该呈现为不同的段落。

更新:

我已经阅读了你们在评论和回答中提到的文章。以下是作者指出的内容:

<小时/>

我的案例满足所有 3 项要求吗？

1 - 它们会改变吗？理论上他们确实如此。

2 - 他们没有 ID。

3 - 它们肯定不会被过滤。但它们重新排序了吗？如果将“line1\nline2\nline3”复制粘贴到记事本中并将其更改为“line3\nline2\nline1”并将其粘贴回textarea。算不算重新订购？我刚刚测试了它，它渲染得很好。

无论如何，到目前为止我还没有遇到任何问题，使用起来感觉很安全。但我想要深入解释它在这种情况下是如何工作的。

<小时/>

function App() {
  const [inputValue,setInputValue] = React.useState("line1\nline2\nline3");
  const lineItems = inputValue.split("\n").map((line,index) => 
    <TextLine 
      key={index}
      index={index}
      value={line}
    />
  );
  
  return(
    <React.Fragment>
      <textarea 
        onChange={()=>setInputValue(event.target.value)} 
        value={inputValue}
        style={{width: "300px", height: "60px"}}
      />
      {lineItems}
    </React.Fragment>
  );
}

function TextLine(props) {
  return(
    <div>{props.value + " (key = " + props.index + ")"}</div>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

Answer 1

注意:如果项目具有唯一 ID(非基元列表应该如此)，请不要使用索引，因为它是 anti-pattern as per documentation

当您没有项目的唯一 ID 时，可以使用索引。

const Numbers = ['One', 'Two', 'Three', 'Four'];

const App = () => (
  <ul>
  {Numbers.map (
    (number, index) => <li key={index}>{number}</li>
  )}
  </ul>
)

如果没有唯一的键，React 无法区分元素是被删除还是只是内容被更改。

唯一 key 的解决方案...

1-您可以创建一个函数来生成唯一的键/ID/数字/字符串并使用它

2-您可以使用 npm 包(库)，例如 uuid , uniqid , shortid ...

3-我建议使用您从数据库中获得的唯一 ID(如果您获得了它)。