React：按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

您的状态必须如下所示，因为您正在访问 render() 中的 itemDetails

this.state = {
    items: [],
    itemDetail: {} 
}

Answer 2

const itemsArray = this.state.items
return(
      <div className="container">
        {itemsArray && itemsArray[0]}
      </div>

如果你是根据一些道具或状态值来决定的，你可以这样做

const itemsArray = this.state.items
const slectedIndex = this.state.selectedIndex or this.props.selectedIndex//depends how you are getting selectedindex logic
return(
      <div className="container">
        {itemsArray && itemsArray[slectedIndex]}
      </div>

Answer 3

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>
    );
}

希望这会有所帮助。

React：按id显示数组元素

React: Display element of array by id

javascript

arrays

element

object

reactjs