主页 / 问题 / 658875
Accepted
Nikolay
Asked:2020-04-26 21:39:54 +0000 UTC2020-04-26 21:39:54 +0000 UTC

反应不输出数组

  • 772

这是代码：

render() {
    console.log(this.state.catalog.products);
    if (this.state.catalog.products) {
        return (
            this.state.catalog.products.map((item) =>
                <div>
                    {item.description}
                </div>
            )
        );
    } else {
        return (
            <div>Загрузка...</div>
        );
    }
}

它的输出会抛出这样的错误： A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

我要输出的数组是：

在此处输入图像描述 在此处输入图像描述

javascript

2 个回答

  1. 在这里总结一下

    this.state.catalog.products.map((item) =>
            <div>
                {item.description}
            </div>

    在 <div> 和 <closeddiv> 标签中

    • 2
  2. Best Answer

    React 不能在没有容器的情况下渲染数组（至少现在还不能）。return应该返回一个（！）DOM 元素或null. 您正在返回多个 DOM 元素。您需要将输出包装在某个容器中，例如div或span。或者甚至像这样缩短代码：

    render() {
    return this.state.catalog.products
        ? (
            <div>{this.state.catalog.products.map((item) =>
                <div>
                    {item.description}
                </div>
            )}</div>
        )
        : <div>Загрузка...</div>;
}

    另外的选择

    render() {
    return <div>{
        this.state.catalog.products
            ? this.state.catalog.products.map((item) =>
                <div>
                    {item.description}
                </div>
            )
            : 'Загрузка...'
        }</div>;
}
    • 2

相关问题