提供程序中的函数结束后重新渲染组件

编程问答 2022-04-29

问题描述

我正在尝试设置具有 3 个功能的组件。显示PokemonList，获取随机小精灵并通过过滤器找到一个。获取随机口袋妖怪效果很好，但自从 2 天以来，我一直在努力弄清楚如何正确设置口袋妖怪列表功能

下面是这个组件的完整代码。 当单击单独导航组件内的 PokemonsList 按钮并使用上下文在提供程序中触发 handleGetPokemonList 函数时，它会呈现。

问题是当 PokemonList 准备好时，我无法管理重新渲染组件。现在我需要另外手动触发 forceUpadte() 函数 (button onClick = () => forceUpdate()) 我尝试在 useEffect() 组件中使用 PokemonList 但它没有任何作用。 我还确信在使用 fetchData() 函数获取数据后，我可以执行 .then(changeState of loading) 但它也不起作用。

在 PokemonList 组件的提供程序中自动呈现来自 fetch 的数据我缺少什么？我收到有关不存在数据的错误，但如果我使用 forceUpdate，则一切正常

在此处完成回购：https://github.com/Mankowski92/poke-trainer

handleGetPokemonList 下面提供程序中的函数

const handleGetPokemonList = () => {
    setCurrentPokedexOption('pokemonList');
    async function fetchData() {
      setImgLoaded(false);
      let res = await fetch(`${API}?offset=0&limit=6/`);
      let response = await res.json();
    
      response.results.forEach((item) => {
        const fetchDeeper = async () => {
          let res = await fetch(`${item.url}`);
          let response = await res.json();
    
          let eachPoke = {
            id: response.id,name: response.name,artwork: response.sprites.other['officialartwork'].front_default,stats: response.stats,};
    
          fetchedPokemons.push(eachPoke);
        };
        fetchDeeper();
      });
      setPokemonList(fetchedPokemons);
      if (fetchedPokemons) {
        return setLoading(false);
      }
   }
   fetchData()
      .then((res) => setLoading(res))
      .catch((err) => console.log('error',err));
   };

下面的PokemonList组件

import React,{ useContext,useState,useCallback } from 'react';
import { StyledPokemonListContainer } from './PokemonList.styles';
import { PokemonsContext } from '../../../providers/Pokemonsprovider';
    
const PokemonList = () => {
  const ctx = useContext(PokemonsContext);
    
  const [,updateState] = useState();
  const forceUpdate = useCallback(() => updateState({}),[]);
    
  const { handleSetImgLoaded } = useContext(PokemonsContext);
    
  return (
    <>
    {ctx.currentPokedexOption === 'pokemonList' ? (
        <StyledPokemonListContainer>
          {ctx.pokemonList && ctx.pokemonList.length ? (
            ctx.pokemonList.map((item,i) => (
          <div className="each-pokemon-container" key={i}>
                <div className="poke-id">{item.id}</div>
                <div className="poke-name">{item.name}</div>
                <img className="poke-photo" onLoad={() => handleSetImgLoaded()} src={item ? item.artwork : ''} alt="" />
              </div>
            ))
          ) : (
            <div className="render-info">Hit rerender button</div>
          )}
          {/* {ctx.pokemonList ? <div>{ctx.pokemonList[0].name}</div> : <div>DUPPSKO</div>} */}
          <div className="buttons">
            <button onClick={() => console.log('PREVOIUS')}>PrevIoUs</button>
            <button className="rerender-button" onClick={() => forceUpdate()}>
              RERENDER
            </button>
            <button onClick={() => console.log('NEXT')}>Next</button>
          </div>
        </StyledPokemonListContainer>
      ) : null}
    </>
  );
};
    
export default PokemonList;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

asynchronousfetchproviderreactjsreactjsrendering