Reactjs React状态将数组作为属性，但当传递时，它会嵌套到一个自命名对象中吗？

我有一个反应状态，看起来是这样的：

  state = {
    itemList: []
  };

我有一个如下所示的渲染函数：

  render() {
    return (
      <div className="App">
        <ListingContainer itemList={this.state.itemList} />
      </div>
    );
  };

const ListingContainer = (itemList) => {
    return(
        <div>
            {
                // getting type error, itemList.map is not a function
                itemList.map(({data}) => <Item data={data} />)
            }
        </div>
    );
};

我的状态设置如下：

  componentWillMount() {
    // getList promise is confirmed to be providing an array
    this._asyncRequest = getList().then(
      itemList => {
        this._asyncRequest = null;
        // breakpoint confirms itemList is array at this time
        this.setState({itemList});
      }
    );
  }

放置在

itemList.map

调用前面的断点显示itemList实际上是一个包含我正在查找的实际itemList数组的对象，如下所示：

itemList:
{
  itemList: [ ... ]
}

而不是我所期望的，这将是：

itemList:
[ ... ]

---

为什么我的数组被转换成包含我的数组的自封对象？

在React中，如果您将道具作为

传递给功能组件，则可以在名为道具的对象或任何您命名的对象中访问它

这里

constlistingcontainer=（itemList）=>{…}

您将该对象命名为

itemList

。这就是为什么您会得到结果

itemList.itemList=[…]

因此，您可以更改代码，即使用解构作为

{itemList}

const ListingContainer = ({itemList}) => {
    return(
        <div>
            {
                // getting type error, itemList.map is not a function
                itemList.map(({data}) => <Item data={data} />)
            }
        </div>
    );
};

constlistingcontainer=（{itemList}）=>{
返回(
{
//获取类型错误，itemList.map不是函数
itemList.map（（{data}）=>）
}
);
};

或者不进行分解

const ListingContainer = (props) => {
        return(
            <div>
                {
                    props.itemList.map(({data}) => <Item data={data} />)
                }
            </div>
        );
    };

constlistingcontainer=（道具）=>{
返回(
{
props.itemList.map（（{data}）=>）
}
);
};

在React中，如果您将道具作为

传递给功能组件，则可以在名为道具的对象或任何您命名的对象中访问它

这里

constlistingcontainer=（itemList）=>{…}

您将该对象命名为

itemList

。这就是为什么您会得到结果

itemList.itemList=[…]

因此，您可以更改代码，即使用解构作为

{itemList}

const ListingContainer = ({itemList}) => {
    return(
        <div>
            {
                // getting type error, itemList.map is not a function
                itemList.map(({data}) => <Item data={data} />)
            }
        </div>
    );
};

constlistingcontainer=（{itemList}）=>{
返回(
{
//获取类型错误，itemList.map不是函数
itemList.map（（{data}）=>）
}
);
};

或者不进行分解

const ListingContainer = (props) => {
        return(
            <div>
                {
                    props.itemList.map(({data}) => <Item data={data} />)
                }
            </div>
        );
    };

constlistingcontainer=（道具）=>{
返回(
{
props.itemList.map（（{data}）=>）
}
);
};

没有回答问题。我做错了什么，导致我的数组被转换成一个首先需要解构的对象？

ListingContainer

组件需要一个参数

props

，它是一个对象，您可以任意调用它。在您的情况下，您已将

道具

替换为

项目列表

。这就是

反应

的工作原理。如果将

props

作为

传递给功能组件，则可以在名为

props

的对象或任何您命名的对象中访问该组件。这就是为什么您会得到结果

itemList.itemList=[…]

谢谢，这很有意义。如果您更新答案以澄清此评论信息，我会将其标记为解决方案。不回答问题。我做错了什么，导致我的数组被转换成一个首先需要解构的对象？

ListingContainer

组件需要一个参数

props

，它是一个对象，您可以任意调用它。在您的情况下，您已将

道具

替换为

项目列表

。这就是

反应

的工作原理。如果将

props

作为

传递给功能组件，则可以在名为

props

的对象或任何您命名的对象中访问该组件。这就是为什么您会得到结果

itemList.itemList=[…]

谢谢，这很有意义。如果您更新答案以澄清此评论信息，我会将其标记为解决方案。