Question

API Json 数据无法通过 map() 在我的 React 应用程序中呈现

2020-07-14

215

javascript json reactjs api

这是控制台记录的，但我还将其保存为变量 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 不知道您何时对其进行变异。您需要使用组件状态，以便 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>;
}