用项目数组填充列表

Question

我有一个项的数组，我访问了项的一个属性，将项划分为两个单独的数组。但是，当我试图在DOM的组件中填充创建的数组时，会给出一个错误

Uncaught Error: Objects are not valid as a React child (found: object with keys {text, key, completedItem}). If you meant to render a collection of children, use an array instead.

代码如下：

render() {
let { items } = this.props;
let listItems = items.map( (item) => {
return (
<TodoItem text={item.text}
key={item.key}
ID={item.key}
isComplete={item.completedItem}
onDelete={this.props.onDelete}
onEdit={this.props.onEdit}
handleComplete={this.props.handleComplete} />
);
});
const revArray = listItems.reverse();
console.log("Reversed Array  : ", revArray);
const completedItems = items.filter((item) => {
return ( item.completedItem == true );
});
console.log("Items Completed Array  : ", completedItems);
const filterCompleted = items.filter((item) => {
return ( item.completedItem == false );
});
console.log("Items not Completed Array  : ", completedItems);
const resultArrItems  = [ ...filterCompleted, ...completedItems];
console.log("Final Array    : ", resultArrItems);
return (
<div className="card card-body mt-5">
<ul className="list-group my-3">
<h3 className="text-capitalize text-center"> todo list </h3>
<div>{resultArrItems}</div>
</ul>
</div>
);
}

当我在控制台中查看数组时，我会按照数组元素的确切顺序获得resultArrItems，但问题是我无法用resultArrItemss填充DOM中的组件。我得到的错误如上所述。有什么解决办法吗。。。？这种行为的原因是什么。。。？

Answer 1

您只能用JSX语法表示render或return中的元素。当前您正在尝试显示一个数组-resultArrItems。对于每个迭代，您需要使用.map()并在有效的JSX元素内部返回。

您可以尝试以下操作：

return <div className="card card-body mt-5">
<ul className="list-group my-3">
<h3 className="text-capitalize text-center"> todo list </h3>
<div>
{
resultArrItems.map((e, i) => <div key={i}>
{i} {/* here you can access also each elements properties */}
</div>)
}
</div>
</ul>
</div>

我希望这能有所帮助！