javascript - onClick 调用 fetch 函数时的 ReactJS 组件生命周期。单击时状态对象消失

Question

我已经被这个问题困扰大约一周了。我正在尝试制作一个简单的 Pokedex(当然是原始的 151)，右侧有直接从 .json 文件(从 api 复制)中提取的 Pokemon 列表，然后单击，左侧将填充该 Pokemon 的详细信息与获取。

我的状态中有一个空对象，我想用 fetch 调用中的数据填充该对象:

this.state = {
    pokemonList: local,
    pokemon: {},
    name: '',
    url: '',
} 

名称和 url 值直接从 onClick 事件填充，然后在提取中使用 url 值。

fetchSinglePokemon(event) {
        fetch(event.target.value)
            .then(response => response.json())
            .then(pokemon => console.log(pokemon))
            .then(pokemon => this.setState({ pokemon: pokemon }));
    }
setSinglePokemon(pokemon) {
        this.setState({ pokemon: pokemon });
    }     

这两个方法运行后，我可以在控制台中看到包含我想要的所有数据的 json 对象，但是在 React DevTools 中，我想要覆盖的状态中的空对象已完全从状态对象中删除。单击另一个选项将更新名称和 url，但 pokemon 对象将永远不会回来。

Pokemon 是另一个没有状态的组件，并且接收所有 Prop 。即使它只是显示信息，该组件也需要是一个类吗？

我已阅读文档中有关组件生命周期的所有内容，但找不到与我的需求相关的任何内容。

我的思考过程是在 componentMount 上设置状态，并在 componentWillUpdate 上通过 onClick 事件控制状态。

我一直在尝试通过《Road to React》电子书和 Wes Bos React 类(class)来学习 React，但改变了我希望应用程序执行的操作，以便我实际上正在学习它的工作原理，而不仅仅是复制某些内容，而是两者兼而有之其中一些来源与我的方向有所不同。

Here's a link to my Repo

提前谢谢您，请将其移至我错过的 React 学习子部分。

Answer 1

需要警惕的一件事:

fetchSinglePokemon(event) {
        fetch(event.target.value)
            .then(response => response.json())
            .then(pokemon => console.log(pokemon)) <- this guy right here.
            .then(pokemon => this.setState({ pokemon: pokemon }));
    }

上面示例中标记的行将导致以下 thenable 将 pokemon 设置为未定义。 response.json() 解析为 json 对象，console.log 将导致 thenable 解析为未定义。

这可以用更好的措辞 - 但这里有一个更直观的方法:

fetchSinglePokemon(event) {
        fetch(event.target.value)
            .then(response => response.json())
             //pokemon in the line below will be the json object
            .then(pokemon => console.log(pokemon))
             //pokemon in the line below will be undefined because you didn't return anything from the above block.
            .then(pokemon => this.setState({ pokemon: pokemon })); //this will look like: {pokemon:undefined}
    }

试试这个:

fetchSinglePokemon(event) {
        fetch(event.target.value)
            .then(response => response.json())
            .then(pokemon => {
               console.log(pokemon);
               return pokemon;
             })
            .then(pokemon => this.setState({ pokemon: pokemon }));
    }