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中，如果您以<ListingContainer itemList={this.state.itemList} />的形式将prop传递给功能组件，则可以在名为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>
        );
    };

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

1 个答案: