javascript - React 渲染:对象作为 React 子对象无效
问题描述
请帮我。我不知道为什么这段代码不起作用。
它给了我一个错误:“对象作为 React 子对象无效(找到:带有键 {itemss} 的对象)。如果您要呈现子对象集合,请改用数组。” 为什么 {i.title} 是一个对象。这只是一个字符串。我怎样才能解决这个问题?以及实际上我如何迭代嵌套对象?
class ShopItem extends React.Component {
render() {
var items = [
{
link: 'first link',
title: 'Emery NEM XF',
price: '$950'
},
{
link: 'second link',
title: 'Emery NEM XF',
price: '$950'
},
{
link: 'third link',
title: 'Emery NEM XF',
price: '$950'
}
];
const item = items.map((i) =>{
return ( <h1>{i.title}</h1> )
});
return (
{items}
)
}
}
ReactDOM.render(<ShopItem /> , document.querySelector('#root'));
解决方案
问题是因为你回来了
return (
{items}
)
这相当于return ({items: items})
ie。您正在返回一个带有键items
和的对象React doesn't expect objects for rendering
。你可以写
const items = items.map((i) =>{
return ( <h1>{i.title}</h1> )
});
return items;
或者
return items.map((i) =>{
return ( <h1>{i.title}</h1> )
});
或者
const items = items.map((i) =>{
return ( <h1>{i.title}</h1> )
});
return <React.Fragment>
{items}
</React.Fragment>
PS 请注意,前两种方法将从开始起作用,
react v16.0.0 onwards
而最后一种方法将从v16.2
开始起作用。
但是,如果您使用的是较低版本,则需要将返回元素包装在容器中,例如
return (
<div>{items}</div>
)
推荐阅读
- java - Minecraft Launcher 因 setUnlocalizedName() 而崩溃;但 IntelliJ 做得很好
- python - 通过 ImageDataGenerator 类将 tfrecord 加载到 Keras
- amazon-web-services - 让一个资源只触发一次 lambda
- c# - 以下在本地主机上的开发工作,但在生产中没有
- dialogflow-es - DialogFlow 促销失败
- javascript - 如何减少对象数组?
- sql-server - 无法识别相同值之间的差异
- powershell - 将“下一个可用的 AD 计算机”添加到 power-shell 脚本
- sql-server - SQL中如何将单选参数转换为多个过滤值?
- c# - 实体类型不是当前上下文模型的一部分(C# - ASP.NET MVC)