onClick调用提取函数时，ReactJS组件的生命周期。 状态对象在单击时消失

Question

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(event.target.value)
            .then(response => response.json())
            .then(pokemon => console.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 console, 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.

Answer 1

One thing to be wary of:

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 }));
    }

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

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

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}
    }

Try this:

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