Итерация по объекту состояния - PullRequest
Новая
       86

Итерация по объекту состояния

0 голосов
/ 01 августа 2020

Я сохраняю некоторые данные в AsyncStorage, а затем получаю их в componentdidmount и устанавливаю состояние. пока у меня все в порядке, но я не могу перебирать данные, чтобы отобразить их в компоненте плоского списка.

Код состояния и componentDidMount 

class Cart extends React.Component {
  state ={ cart:"" }

  async componentDidMount(){
    const item = await AsyncStorage.getItem('cart')
    this.setState({cart:JSON.parse(item)})
  }

С помощью this.state.cart я получаю этот объект 

Object {
  "cart": Array [
    Object {
      "count": 1,
      "key": "NK01",
      "name": "Mohanjo Beaded Choker",
      "pic": "img1",
      "price": "1200",
    },
    Object {
      "count": 1,
      "key": "ID01",
      "name": "Silver Glass",
      "pic": "img3",
      "price": "9400",
    },
    Object {
      "count": 1,
      "key": "ID03",
      "name": "Ganesh With Kalash",
      "pic": "img2",
      "price": "3570",
    },
  ],
  "total": 3,
}

Я хочу перебрать this.state.cart.cart, но когда я использовал функцию карты, он выдает ошибку, что это не функция. Проверено, что его тип показывает объект, а с помощью Array.isArray показывает истину, но не удается получить длину и выполнить итерацию.

1 Ответ

0 голосов
/ 01 августа 2020

this.state.cart - это массив, поэтому вы можете использовать функцию карты для отображения элементов массива: 

class Cart extends React.Component {
  state ={ cart:[] }

  async componentDidMount(){
    const item = await AsyncStorage.getItem('cart')
    this.setState(JSON.parse(item))
  }

this.state.cart?.map(cart =>
        <div key={cart.key}>
          <h4>{cart.name}</h4>
          <p>{cart.price}</p>
        </div>
      );
...