Как передать массив объектов в качестве реквизита пользовательскому компоненту в React Native?

Question

Я получил некоторые данные из API в виде массива JSON в методе componentDidMount, как показано ниже.

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, как хочу. Теперь я хочу передать массив в al oop в качестве опоры для пользовательского компонента, но он дает ошибку. Мой метод рендеринга выглядит так:

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",
    }
]

Я хочу передать эти данные для отображения продуктов как al oop. Как я могу это сделать? Заранее спасибо!

Answer 1

Поскольку загрузка данных является асинхронной, у вас, вероятно, есть неинициализированное состояние.

В качестве более безопасной практики кодирования вы можете что-то вроде

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

В зависимости от конфигурации вашего веб-пакета вы также можете использовать необязательное связывание 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: []
}