arrays - 如何将对象数组作为道具传递给反应原生的自定义组件？

Question

我在 componentDidMount 方法中从 API 获取了一些数据作为 JSON 数组，如下所示。

componentDidMount() {
    return fetch('http://..someAPI../product/')
      .then(res => res.json())
      .then(resJson => {
        this.setState({
          isLoading: false,
          dataSource: resJson,
        });
        var objects = this.state.dataSource;
        for (var i = 0; i < objects.length; i++) {
          console.log('Item Name: ' + objects[i].productName);
        }
      })
      .catch(err => {
        console.log(err);
      });
  }

在这里，我得到了我想要的 console.log 输出。现在我想将循环中的数组作为道具传递给自定义组件，但它会出错。我的渲染方法看起来像这样

return (
      <View>
        <Content>
          {this.state.dataSource.map(item => {
            <Product Name={item.productName} price={item.price}/>;
          })}
        </Content>
      </View>
    );

我原来的 Json 对象看起来像这样

[
   {
        "category": [
            "Food",
            "Bread",
            "Bun"
        ],
        "_id": "1",
        "productName": "Sausage bun",
        "price": 70,
        "details": "test product",
    },
    {
        "category": [
            "Food",
            "Bread",
            "Bun"
        ],
        "_id": "2",
        "productName": "Fish Pastry",
        "price": 50,
        "details": "test product",
    }
]

我想传递这些数据以将产品显示为循环。我怎样才能做到这一点？先感谢您！

Answer 1

由于数据加载是异步的，因此您可能处于未初始化状态。

作为一种更安全的编码实践，你可以像

{this.state.dataSource && this.state.dataSource.map(item => {
            return <Product Name={item.productName} price={item.price}/>;
          })}

根据您的 webpack 配置，您还可以使用可选链接https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

{this.state?.dataSource?.map(item => {
            <Product Name={item.productName} price={item.price}/>;
          })}

另外，初始化你的状态

this.state = {
   dataSource: []
}