我正在尝试显示我的项目数组中的一个元素。我可以将元素记录到控制台...但无法渲染它。在我的 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>
);
}
最佳答案
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>
);
}
希望这会有用。
关于javascript - react : Display element of array by id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48313470/