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

Question

我有一个React状态，看起来像这样：

state = {
itemList: []
};

我有一个渲染函数，看起来像这样：

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

ListingContainer组件如下所示：

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:
[ ... ]

为什么我的数组被转换成一个包含我的数组的自命名对象？

Answer 1

在React中，如果将props作为<ListingContainer itemList={this.state.itemList} />传递给功能组件，则可以在名为props的对象或任何您命名的对象内访问它。

在const ListingContainer = (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>
);
};

或不破坏

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