reactjs - 带有 fetch api 的 React hook

Question

我想发出一个非常简单的 Fetch 请求(或 axios 请求)，然后映射这些结果。

为此，我使用了 useState 和 useEffect，但我肯定做错了什么。

 function App() {
  const [todos, setTodos] = useState({});

  const getTodos = () => {
    const urlTodos = "https://jsonplaceholder.typicode.com/todos/";
    return fetch(urlTodos)
      .then(res => res.json())
      .then(res => {
       return res 
      });
  };

  useEffect(() => {
    getTodos().then(setTodos);
  }, []);

  const [todosSimple, setTodosSimple] = ([
    {
      text: 'learn about react',
      isCompleted :true
    },
    {
      text: 'Danse',
      isCompleted: false
    }
  ])

  console.log(todosSimple)


  return (
    <div className="App">
      {todosSimple.map((todo,index) => {
        return todo;     
      }  
      )}

    </div>
  );
}

Codesandbox

Answer 1

首先你需要更改这一行

const [todos, setTodos] = useState({});

到

const [todos, setTodos] = useState([]);

因为 todos 变量将有一个默认值，并且它将是一个空对象。并且对象上没有 .map 方法，并且您从 api 收到一个数组。

其次，我建议在最后的 getTodos 中使用 setTodos 函数。

.then(res => setTodos(res))

然后您可以在返回中映射您的todos

here's and example