Реагировать крюк с извлечением API

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.

Во-вторых, я бы рекомендовал использовать функцию setTodos внутри getTodos в последнем.

.then(res => setTodos(res))

и затем вы можете отобразить свой todos в ответе

здесь и пример