如何使用钩子 React Native 获取数组并将其存储在状态中答案

【问题标题】：How to fetch array and store it in state using hooks React Native如何使用钩子 React Native 获取数组并将其存储在状态中
【发布时间】：2019-12-23 20:17:55
【问题描述】：

我尝试使用钩子获取数组并更新状态

const [items, setItems] = useState([]);

const getItems = async () => {
    try {
        const response = await apiLink.get('...');
        const data = response.data;
        console.log(data) // show an array of objects
        setItems(data);
        console.log(items); // show empty array
      } catch(error) {
        //...
      }
    };

console.log（数据）：

Array [
  Object {
    "id": "1",
    "name": "Item name 1",
    "score": 10,
  },
  Object {
    "id": "2",
    "name": "Item name 2",
    "score": 12,
  },
]

console.log(items): Array []

我也尝试使用const responseJSON = response.json()，但出现错误

response.json 不是函数。（在'response.json()'中，'response.json'是未定义的）

我做错了什么？

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

setItems 这里将被异步调用，因此在控制台中还看不到任何内容。但是，如果您想在设置项目的状态后进行一些计算，您可以使用 useEffect 的回调函数。

您可以阅读更多 here 了解如何在功能组件中使用 setState 回调。

【讨论】：

【解决方案2】：

这里的seItems函数是异步的尝试保持日志在useEffect hook中你会得到结果

【讨论】：

【解决方案3】：

您的组件应该类似于：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState({ hits: [] });

  useEffect(async () => {
    const result = await apiLink.get('...');
    setData(result.data);
  });

  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}

export default App;

【讨论】：