当onClick调用fetch函数时，ReactJS组件生命周期。(ReactJS component lifecycle when onClick calls a fetch function. state object disappears on click)

当onClick调用fetch函数时，ReactJS组件生命周期。(ReactJS component lifecycle when onClick calls a fetch function. state object disappears on click)

我一直坚持这个问题大约一个星期了。 我正在尝试制作一个简单的Pokedex（当然是原始的151），右边的Pokemon列表直接从.json文件中提取（从api复制），点击后，左边会填充该Pokemon的详细信息拿一个。

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

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

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

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

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

口袋妖怪是另一个没有状态的组件，并且收集了所有道具。 即使它只是显示信息，该组件是否也需要成为一个类？

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

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

我一直在努力学习React与反应电子书和Wes Bos React课程，但改变我想要的应用程序这样做，我实际上正在学习它是如何工作的，而不仅仅是复制一些东西，而是这两个来源与我前进的方向不同。

这是我的回购链接

提前谢谢你，请把它移到我错过的React学习小组。

I have been stuck on this problem for about a week now. I am trying to make a simple Pokedex (original 151 of course) with a list of Pokemon on the right pulled directly from a .json file (copied from an api), and on click, the left gets populated with the details of that Pokemon with a fetch.

I have an empty object in my state that I want to populate with the data from the fetch call:

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

The name and url values are filled directly from the onClick event, and then the url values is used in the fetch.

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

After these two methods run, I can see the json object with all the data I want in the cole, but the in React DevTools, the empty object in state that I want to override, is removed from the state object entirely. Clicking another option will update the name and url, but the pokemon object will never come back.

Pokemon is another component that has no state, and recives all the props. Even though it is just going to be displaying information, does that component need to be a class as well?

I've read everything there is on the docs about the Component Lifecycle, and I can't find anything relevant to my needs.

My thought process is that the state is set on componentMount, and the componentWillUpdate to control the state with the onClick events.

I've been trying to learn React with the Road to React eBook and Wes Bos React course, but changing what I want the App to do so that I'm actually learning how it works, not just copying something, but both of these sources have diverged from where I am heading.

Here's a link to my Repo

Thank you in advance, and please move this to React learning sub that I missed.

最满意答案

有一点需要警惕：

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

上例中标记的行将导致以下因素将pokemon设置为undefined。 respe.json()解析为json对象， cole.log将导致thenable以undefined解析。

这可能措辞得更好 - 但这是一种更直观的方法：

fetchSinglePokemon(event) { fetch(value) .then(respe => respe.json()) //pokemon in the line below will be the json object .then(pokemon => cole.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(value) .then(respe => respe.json()) .then(pokemon => { cole.log(pokemon); return pokemon; }) .then(pokemon => this.setState({ pokemon: pokemon })); }

One thing to be wary of:

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

The line labeled in the above example will cause the following thenable to have pokemon set to undefined. respe.json() resolves to the json object, the cole.log will cause the thenable to resolve with undefined.

That could be worded better - but here's a more visual approach:

fetchSinglePokemon(event) { fetch(value) .then(respe => respe.json()) //pokemon in the line below will be the json object .then(pokemon => cole.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} }

Try this:

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