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

【问题标题】：How to pass object array as props to a custom component in react native?如何将对象数组作为道具传递给反应原生的自定义组件？
【发布时间】：2020-08-02 16:55:06
【问题描述】：

我已经在 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",
    }
]

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

【问题讨论】：

您得到的错误是什么？初始化时是否为 dataSource 设置了值？也许像一个空数组
我已将状态中的 dataSource 初始化为 null。我得到“null不是对象（评估'this.state.dataSource.map'）”作为错误消息
而不是 null 使用一个空数组来修复它

标签： arrays json react-native object react-props

【解决方案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 子级无效，如果您从渲染返回一个组件而不是，则可能会发生这种情况，或者您可能意味着调用这个函数而不是返回它“
好的@SulaRaanawake。第二个错误是因为你没有返回这里。 {this.state.dataSource.map(item => { return <Product Name={item.productName} price={item.price}/>; })}
非常感谢，这解决了！因为我是新手，所以我有时会想念这样的事情。