javascript - 在 Reactjs 中的 setState() 之后未定义(使用钩子(Hook))

Question

我自己学习 react 和 js。请解释为什么会出现这种情况。 PS:请原谅我的大文本，我试图尽可能清楚地解释问题。谢谢。事情的本质:通过钩子(Hook)设置初始状态:

  const [pokemon, setPokemon] = useState({
    img: "",
    name: "",
    types: [],
    abilities: [],
    moveList: [],
    weight: "",
    height: "",
    description: "",
    genus: "",
    chanceToCatch: "",
    evolutionURL: ""
  });

此外，我发出 api 请求以从 useEffect 内部获取信息:

useEffect(() => {
    const fetchData = async () => {
      await Axios({
        method: "GET",
        url: urlPokemonAPI
      })
        .then(result => {
          const pokemonResponse = result.data;

          /* Pokemon Information */
          const img = pokemonResponse.sprites.front_default;
          const name = pokemonResponse.name;
          const weight = Math.round(pokemonResponse.weight / 10);
          const height = pokemonResponse.height / 10;
          const types = pokemonResponse.types.map(type => type.type.name);
          const abilities = pokemonResponse.abilities.map(
            ability => ability.ability.name
          );
          const moveList = pokemonResponse.moves.map(move => move.move.name);
          setPokemon(() => {
            return {
              img: img,
              name: name,
              weight: weight,
              types: types,
              abilities: abilities,
              moveList: moveList,
              height: height
            };
          });
        })

      await Axios({
        method: "GET",
        url: urlPokemonSpecies
      }).then(result => {
         let description = "";
         result.data.flavor_text_entries.forEach(flavor => {
          if (flavor.language.name === "en") {
           description = flavor.flavor_text;
          }
        });
        let genus = "";
        result.data.genera.forEach(genera => {
         if (genera.language.name === "en") {
          genus = genera.genus;
         }
        });
        const evolutionURL = result.data.evolution_chain.url;
        const eggGroups = result.data.egg_groups.map(
          egg_group => egg_group.name
        );
        const chanceToCatch = Math.round(
          (result.data.capture_rate * 100) / 255
        );
        setPokemon(pokemon => {
          return {
            ...pokemon,
            description: description,
            genus: genus,
            chanceToCatch: chanceToCatch,
            evolutionURL: evolutionURL,
            eggGroups: eggGroups
          };
        });
      });
    };
    fetchData();
  }, [urlPokemonAPI, urlPokemonSpecies]);

这个问题特别出现在 eggGroups 上。 (在 abilities 和 types 的处理相同的情况下，没有这样的问题)。这就是当我想将数据作为 <div> Egg Group: {pokemon.eggGroups} </div> 输出到页面时发生的情况。数据显示正常，但是一想输出 eggGroups以及 abilities和 types用逗号分隔 ( join ( ',')) - 错误: TypeError: pokemon.eggGroups is undefined .我决定通过控制台检查这件事并将这个 eggGroups键入超时:



在某个时候， eggGroups变得未定义......为什么，我无法理解。但是如果我单独设置状态，比如 const [egg, setEgg] = useState ([]); setEgg (eggGroups);没有观察到这样的问题。为什么会这样？ types 一切正常和 abilities .先感谢您。

Answer 1

来自钩子(Hook)的状态更新器在更新状态时不会合并状态值，而是用新值替换旧值

由于您使用状态更新器，例如

 setPokemon(() => {
        return {
          img: img,
          name: name,
          weight: weight,
          types: types,
          abilities: abilities,
          moveList: moveList,
          height: height
        };
      });

eggGroups属性丢失，因此它变得未定义。您需要通过传播从回调获得的先前状态值来更新它

setPokemon((prev) => {
        return {
          ...prev
          img: img,
          name: name,
          weight: weight,
          types: types,
          abilities: abilities,
          moveList: moveList,
          height: height
        };
      });