为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕神8447489 2022-06-09 18:56:18
我自己学习 react 和 js。请解释为什么会出现这种情况。PS:请原谅我的大文本,我试图尽可能清楚地解释问题。谢谢。事情的本质:通过钩子设置初始状态:  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            };          });        })问题特别出现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。先感谢您。
查看完整描述

2 回答

?
泛舟湖上清波郎朗

TA贡献1818条经验 获得超3个赞

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


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


 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

        };

      });


查看完整回答
反对 回复 2022-06-09
?
犯罪嫌疑人X

TA贡献2080条经验 获得超4个赞

您的代码有问题,这是使用 axios 等待的正确方法,您需要像这样导入 axios


import axios from 'axios';

await应该用一个promise调用,然后它从api返回数据,如下所示:


const result = await axios.get(urlPokemonAPI);

这是与您的代码具有相同逻辑的代码片段


useEffect(() => {

    const fetchData = async () => {

        // import axios from 'axios';

        try {

            const result = await axios.get(urlPokemonAPI);

            const pokemon = result.data;

            setPokemon({

                img: pokemon.sprites.front_default,

                name: pokemon.name,

                weight: Math.round(pokemon.weight / 10),

                types: pokemon.types.map(i => i.type.name),

                abilities: pokemon.abilities.map(i => i.ability.name),

                moveList: pokemon.moves.map(i => i.move.name),

                height: pokemon.height / 10

            });


            const result2 = await axios.get(urlPokemonSpecies);

            const data = result2.data;

            let description = "";

            data.flavor_text_entries.forEach(i => {

                const lang = i.language.name

                if (lang === "en") {

                    description = i.flavor_text;

                }

            });

            let genus = "";

            data.genera.forEach(i => {

                const lang = i.language.name;

                if (lang === "en") {

                    genus = i.genus;

                }

            });

            setPokemon(pokemon => {

                return {

                    ...pokemon,

                    description,

                    genus,

                    chanceToCatch: Math.round((data.capture_rate * 100) / 255),

                    evolutionURL,

                    eggGroups: data.egg_groups.map(g => g.name)

                };

            });

        } catch (e) {

            console.log(e);

        }

    };

    fetchData();

}, [urlPokemonAPI, urlPokemonSpecies]);

你看到另一个问题了吗:你调用了两次 setPokemon,让我们再重写一次:


useEffect(() => {

    const fetchData = async () => {

        // import axios from 'axios';

        try {

            const result = await axios.get(urlPokemonAPI);

            const data1 = result.data;

            const result2 = await axios.get(urlPokemonSpecies);

            const data2 = result2.data;

            function resolveDescription(data) {

                let description = "";

                data.flavor_text_entries.forEach(i => {

                    const lang = i.language.name

                    if (lang === "en") {

                        description = i.flavor_text;

                    }

                });

                return description;

            }

            function resolveGenus(data) {

                let genus = "";

                data.genera.forEach(i => {

                    const lang = i.language.name;

                    if (lang === "en") {

                        genus = i.genus;

                    }

                });

                return genus;

            }


            setPokemon({

                img: data1.sprites.front_default,

                name: data1.name,

                weight: Math.round(data1.weight / 10),

                types: data1.types.map(i => i.type.name),

                abilities: data1.abilities.map(i => i.ability.name),

                moveList: data1.moves.map(i => i.move.name),

                height: data1.height / 10,

                description: resolveDescription(data2),

                genus: resolveGenus(data2),

                chanceToCatch: Math.round((data2.capture_rate * 100) / 255),

                evolutionURL: data2.evolution_chain.url,

                eggGroups: data2.egg_groups.map(g => g.name)

            });

        } catch (e) {

            console.log(e);

        }

    };

    fetchData();

}, [urlPokemonAPI, urlPokemonSpecies]);


查看完整回答
反对 回复 2022-06-09
  • 2 回答
  • 0 关注
  • 177 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信