请帮我。我不知道为什么这段代码不起作用。
它给我一个错误:“对象作为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})即 您将返回具有键items和的对象React doesn't expect objects for rendering。你可以写
return ({items: items})
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开始起作用。
react v16.0.0 onwards
v16.2
但是,如果您使用的是较低版本,则需要将return元素包装在类似
return ( <div>{items}</div> )