用项目数组填充列表

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填充DOM中的组件。我上面提到的错误。有什么解决方案吗...？以及这种行为的原因是什么...？

Answer 1

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

您可以尝试以下操作：

.map()

我希望这会有所帮助！