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

如何在React Native中将对象数组作为道具传递给自定义组件？

1 个答案: