React - UseState не вызывает повторное рендеринг после извлечения внутри ловушки useEffect.

Question

Я просто работаю над своим первым руководством по React с использованием хуков - я использую попытку извлечения локальных данных внутри useEffect, а затем обновляю состояние с помощью useState. Затем я передаю состояние в Context.provider, на который подписывается дочерний элемент (Card. js). Даже при использовании useEffect компонент Card и его состояние не обновляются и не обновляются. Что я делаю не так?

MainContext. js -

import React, { createContext, useState, useContext, useEffect, Fragment } from 'react';


import List from '../containers/List';

export const myContext= createContext();


export const MainContext = ({children}) => {

  const [films, setFilms] = useState([]);

  const loadData = () => {
    try {
      fetch('../src/assets/data.json').then( result => result.json()).then(movies => { 
      setFilms(films)      
      }) 
    } catch (error) {
      console.log('there has been an error')
    }}


  useEffect(() => { 

    loadData() 

    },[]);


   return (

      <myContext.Provider value={{films,setFilms }}>
        {children()}
      </myContext.Provider>
    );

  } 

Карта. js -

function Card() {

  const {films} = useContext(myContext)

  if (films !== undefined) { 
    return (

      <div>
        { films.map((movie,i) => {
          return (
          <div key={i}>
            <img src={movie.img.src} className='card-img-top' alt={movie.img.alt} />
          <div className='card-body'>
            <h2 className='card-title'>{`#${movie.ranking} - ${movie.title} (${movie.year})`}</h2>
          </div>
          <ul className='list-group list-group-flush'>
            <li className='list-group-item'>{`Distributor: ${movie.distributor}`}</li>
            <li className='list-group-item'>{`Amount: ${movie.amount}`}</li>
          </ul></div>
          )
        })

        }
      </div>
    )
  } else {
  return <div>{'Update Failed'}</div>
  }

}

export default Card

Answer 1

У вас нет никакой зависимости в вашем массиве useEffect. Вот почему он не запускается снова после монтирования приложения. Вам нужно передать ему зависимость, чтобы он мог запускаться снова каждый раз, когда изменяется значение зависимости. Также рассмотрите возможность добавления asyn c перед функцией loadData.