Массив в состоянии не обновляется после запуска useEffect в React - PullRequest
Новая
       7

Массив в состоянии не обновляется после запуска useEffect в React

0 голосов
/ 28 апреля 2020

Я крайне новичок в React. js. Я пытаюсь изменить переменную recepies, которая находится в состоянии с помощью хуков. Ниже приведен фрагмент кода: 

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {

const [recepies, setRecepies] = useState([]);

useEffect(()=>{getRecepies()}, []);

//const example = Some valid API URL


  const getRecepies = async () =>{
    const response = await fetch(example);
    const data = await response.json();

    //data.hits is an array of 10 objects
     setRecepies(data.hits);

     console.log(recepies);
    // prints nothing

  }

  return (  
    <div className="App">
    </div>
  );
}

export default App;

Проблема в том, что setRecepies НЕ обновляет состояние recepies. Почему это так? data.hits - это допустимый массив, содержащий 10 объектов, которые я извлекаю с помощью API.

1 Ответ

1 голос
/ 28 апреля 2020

recepies является местным const. Это никогда не изменится, и это не то, что setRecepies пытается сделать. Если вы поместите оператор log туда, где вы его поместили, он может только когда-либо выйти из того, чему recepies был равен, когда был создан getRecepies.

Цель setRecepies состоит в том, чтобы дать команду реагировать на повторную визуализацию компонента. Когда произойдет второй рендеринг, будет создан новый локальный const, который получит новое значение. Эта переменная видна всему, что создано во втором рендере, а не тому, что создано в первом рендере. Поэтому, если вы хотите увидеть новое значение, поместите оператор log в тело компонента, чтобы вы могли видеть, с каким значением он переопределяется. 

const [recepies, setRecepies] = useState([]);
console.log('rendering with', recepies);
...