我的反应应用程序中的map（）未呈现API Json数据

Question

My array of API generated "todo" objects.

这是控制台记录的，但我也将其保存为变量 todosData。现在这个变量曾经是相同的格式（具有 id、title、completed 的对象数组）但是我的硬编码数据。我用组件渲染了这个，因为我的应用程序是用 react 制作的。这是它的代码：

import React from "react";
import TodoItem from "./TodoItem";
import todosData from "./TodosData";

// Container for every todo object

export default function Todos() {
  const todoItemArray = todosData.map((todo) => {
    return <TodoItem title={todo.title} key={todo.id} completed={todo.completed} />;
  });
  return <div>{todoItemArray}</div>;
}

现在您可以看到，当我从硬编码数据切换到 api 数据时，我什至没有更改数组名称。正如我所提到的，两者都是对象数组。只是这个 map 方法在我的网站上呈现了 0 个组件。在它呈现所有之前（当我对值进行硬编码时）。 我完全糊涂了。

这是获取数据的 fetch() 方法。即使我的 console.log 显示这不是问题：

let todosData = [];

fetch("https://jsonplaceholder.typicode.com/posts/")
  .then((res) => res.json())
  .then((data) => todosData.push(...data))
  .then(() => console.log(todosData));

export default todosData;

Answer 1

您不能只将数据存储在变量中。 React 不知道你什么时候改变它。您需要使用 component state 以便 react 知道何时重新渲染您的组件。获取数据的地方也有影响：

export default function Todos() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts/")
      .then(res => res.json())
      .then(data => setTodos(data))
  }, []);

  return (
    <div>
      {todos.map(todo => (
        <TodoItem title={todo.title} key={todo.id} completed={todo.completed} />
      )}
    </div>;
}