问是否可以使用映射函数索引作为包含动态不可预测文本的反应性组件的关键？
EN

Stack Overflow用户

提问于 2020-01-03 01:22:31

回答 1查看 2.3K关注 0票数 0

我得到了这段代码，其中我将动态文本解析成不同的行，并为每一行文本呈现单独的组件。

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

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

问题

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

Note1：我不能使用这些值作为键，因为所有行都可能具有完全相同的值，因此它们不会是唯一的。

Note2：此代码运行在用于BlogPosts的Admin表单中。我编写了一些定制的标记文本，就像textarea中为StackOverflow上的问题编写的一样，我需要解析它，以便在屏幕上呈现为博客文章时给出适当的样式。例如：**bold text**等，每一行都应该呈现为不同的段落。

更新：

我读过你们在评论和答复中提到的那篇文章。这是作者指出的：

我的案子符合所有三个要求吗？

它们会变吗？从理论上讲是这样的。

2-他们没有身份证。

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"/>

javascript

reactjs

react-hooks

回答 1

Stack Overflow用户

发布于 2020-01-03 01:35:07

注意事项：如果条目有唯一的id (并且非原语列表应该有)，就不要使用索引，因为它是一个反模式如文档所示

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

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

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