Данные API Json не отображаются с помощью map () в моем приложении реакции

Question

Мой массив сгенерированных API объектов «todo».

Это записано в консоль, но я также сохранил его как переменную todosData. Теперь эта переменная имела тот же формат (массив объектов с идентификатором, заголовком, завершенным), но мои жестко закодированные данные. Я визуализировал это с помощью компонентов, поскольку мое приложение создано с помощью реакции. Вот его код:

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. Как я уже упоминал, оба были массивом объектов. Только этот метод карты отображает 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 не знает, когда вы его мутируете. Вам нужно использовать состояние компонента , чтобы реагировать на повторную визуализацию вашего компонента. Также действует место для получения данных:

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