Question

 constructor(props) {
    super(props);
    this.state = {
    number: [{
          id : 10,
      },
      {
          id: 20,
      }    
    ]
}
...
render() {
    const { number } = this.state;
    return (
        {number.map(numbers => (
            <div>
               {numbers[1]}
            </div>
        ))}
    )
}
...

{numbers[1]}无效。我想在屏幕上看到20。我看了https://reactjs.org/docs/lists-and-keys.html，但我找不到解决办法。我该如何解决呢？谢谢。

Answer 1

numbers[1]无效，因为数字将是{id: 20}之类的对象，你想要的是渲染对象的id，你首先要过滤我们想要使用的对象然后映射并呈现像

render() {
   const { number } = this.state;
   return (
       {number.filter(data => {
          return data.id == 20; // any condition here
       }).map(numbers => (
          <div>
            {numbers.id}
          </div>
       ))}
   )
}

如果您只想访问单个元素，只需编写

即可

render() {
   const { number } = this.state;
   return (
       <div>
          {number[1].id}
       </div>
   )
}

Answer 2

您正在使用数组上的地图功能，因此您将获得每个对象的数字＆＃39;田野一个接一个。

Map function in javascript

希望这有帮助。

在数组中查找一个元素reactjs

2 个答案: