反应渲染数据数组映射答案

【问题标题】：react render data array map反应渲染数据数组映射
【发布时间】：2020-05-10 15:47:56
【问题描述】：

我在 react js 中遇到了一个问题，我使用数组映射函数在组件上呈现数据，但它们显示 last value 的数据。

反应组件

  if (this.state.data
    && this.state.data.length
    )  
    {this.state.data.map(({ full_name }, i) => (
           name = (
          <p key={i}>{this.state.data[i].full_name }</p>
        )))
 }

return ( 
<div className="row">
  {names}
</div>

显示all values 的数据，但它们显示last value

命名数据

alex
john
smith //they show last value

我应该在我的代码中进行哪些更改？有人帮我吗？

【问题讨论】：

您将.map() 的结果扔掉了——您可能打算将其捕获为names？另外，不要在.map() 中分配东西，它已经将源数组转换为转换数据的目标数组。

标签： javascript arrays reactjs object map-function

【解决方案1】：

试试这个：

const names =
 this.state.data.length > 0 &&
 this.state.data.map(name => <p key={name}>{name}</p>);

  return ( 
    <div className="row">
      {names}
    </div>
   );

【讨论】：

不工作@
如果你使用map，你不需要测试length：[]变成[]，任何包含数据的东西都会被转换。 const names = this.state.data.map(name => <p key={name}>{name}</p>); 这里就够了。
我使用 .length 来检查 state.data 是否被回调函数填充，所以这只是在调用未解决时检查是否未定义。

【解决方案2】：

根据下面的评论反馈编辑


 const names = this.state.data.map((item) => (
          <p key={item}>{item.full_name }</p>
        ))

或


 const names = this.state.data.map(({full_name}) => (
          <p key={full_name}>{full_name}</p>
        ))

这是一个沙盒示例
https://codesandbox.io/s/nostalgic-wood-9jrib?file=/src/App.js

【讨论】：

大概this.state.data 总是一个数组（尽管它可能是空的）所以我们不需要任何这些额外的检查。 const names = this.state.data.map((item, i) => <p key={item_full_name}>{item.full_name }</p>) 工作正常。此外，永远不要使用数组位置作为键，键的全部意义在于它唯一地标识真实数据以用于 DOM diffing。如果交换数组中的两个元素，它们的索引会发生变化，但数据仍然相同：数组位置不能唯一标识元素。
嗨，迈克，非常感谢您的反馈。给你一些问题：'大概 this.state.data 总是一个数组'：假设它是安全的吗？如果数据被初始化为 {} 或 null 怎么办？这个键值从哪里来的{item_full_name}？由于names 是不可变的，这不保证分配给键的 i 是唯一且一致的吗？感谢您的洞察力
这里有一篇文章可以完全解释迈克的评论：medium.com/@robinpokorny/…
那么这将是一个不同的错误 - 作为负责代码的人，初始化您的状态以使其保持可预测性。不要改变类型，保持稳定。