React - UseState 在 useEffect 钩子中获取后未触发重新渲染

Question

我正在使用钩子完成我的第一个 React 教程 - 我正在尝试在 useEffect 中获取本地数据，然后使用 useState 更新状态。然后我将状态传递给子元素（Card.js）订阅的 Context.provider。即使 useEffect 运行，卡片组件和状态也不会被重新渲染/更新。我做错了什么？

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

  } 

Card.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 数组中没有任何依赖项。这就是为什么应用程序安装后它不会再次触发的原因。您需要向它传递一个依赖项，以便每次依赖项值更改时它都可以再次运行。另外，请考虑在您的 loadData 函数之前添加 async。