Question

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

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（项目）： Array []

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

response.json不是函数。（在“ response.json（）”中，“ response.json”未定义）

我怎么了？

Answer 1

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

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

Answer 2

此处的seItems函数是异步的，请尝试将日志保留在useEffect挂钩中，您将获得结果

Answer 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;

如何使用钩子React Native

3 个答案: