javascript - react : Display element of array by id

Question

我正在尝试显示我的项目数组中的一个元素。我可以将元素记录到控制台...但无法渲染它。在我的 setState 中，我制作了 itemDetail，它从 items 数组中获取第一个元素:(也许有更好的方法来做到这一点？)

this.setState({ items: items, itemDetail: items[0], value: this.state.value })

当我尝试调用 {itemDetail} 时，它给出了错误:

"Objects are not valid as a React child (found: object with keys {id, name})...."

完整代码如下。如何在 React 中渲染数组中的第一个元素？或者更好的是，通过 Id 显示元素。谢谢。

constructor(props){
    super(props);
    this.state = {
      items: []
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  componentDidMount(){
    const items = [
      {
        'id': 0,
        'name': 'firstName'
      },
      {
        'id': 1,
        'name': 'secondName'
      }
    ];

    this.setState({ items: items, itemDetail: items[0] });
  }


  render(){

    const { items, itemDetail } = this.state;

    console.log(itemDetail);

    return(
      <div className="container">
        {itemDetail}
      </div>
    );
  }

Answer 1

React 不知道如何渲染对象itemDetail。让我们帮助他:

render(){

    const { items, itemDetail } = this.state;

    console.log(itemDetail);

    return(
        <div className="container">
            <div className="item-id">{itemDetail.id}</div>
            <div className="item-name">{itemDetail.name}</div>
        </div>
    );
}

希望这会有用。