React – UseState在useEffect钩子中的获取后没有触发重ender。

我正在使用钩子完成我的第一个React教程–我正在尝试在useEffect中获取本地数据,然后使用useState更新状态。然后,我将状态传递到一个Context.provider中,而这个Context.provider是一个子元素(Card.js)所订阅的。尽管useEffect运行了,但Card组件和状态并没有被reerenderedupdated。我到底做错了什么?

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

解决方案:

你的useEffect数组中没有任何依赖关系。这就是为什么一旦应用被挂载,它就不会再次触发。你需要给它传递一个依赖,这样每次依赖值改变时,它都可以再次运行。另外,考虑在你的loadData函数之前添加async。

给TA打赏
共{{data.count}}人
人已打赏
未分类

有没有一种推荐的方式来获得所有信息?

2022-9-11 0:33:37

未分类

在Lua中从表达式中提取变量

2022-9-11 0:33:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索