Question

我在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

我应该更改我的代码吗？有人帮我吗？

Answer 1

尝试一下：

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

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

Answer 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

反应渲染数据数组图

2 个答案: