javascript - 传递的参数在函数和回调中未定义。在别处定义

Question

我确信我在这里忽略了一些愚蠢的事情，但提前致谢。

我正在尝试将一个 Prop 传递给我的 fetch。 location.param1 显示正常，而 fetchData() 调用中的相同内容显示为未定义。即使在初始显示为定义后调用。

这是代码...

    fetchData = (name) => {
    console.log(name)
    fetch(`https://pokeapi.co/api/v2/pokemon/${name}`)
        .then(res => res.json())
        .then(data => this.setState({
            pokemon: {
                id: data.id,
                name: data.name,
                sprites: data.sprites,
                abilities: data.abilities,
                base_experience: data.base_experience,
                forms: data.forms,
                game_showings: data.game_indices,
                held_items: data.held_items,
                moves: data.moves,
                stats: data.stats,
                types: data.types,
                weight: data.weight,
                height: data.height
            }
        }), console.log(this.state.pokemon))
}

render() {

    const { location } = this.props;


    return (
        <div >
            {location.param1}
            {this.fetchData(location.param1)}
        </div>
    )
}

谢谢!

Answer 1

我看不到你从 json 中获取 param1 的位置(我认为)。 无论如何，你不应该在渲染中调用 fetch。

您可以使用 React Hooks(请参阅此处 => https://it.reactjs.org/docs/hooks-intro.html )来简化代码。

f.e:

     function Foo () {
     const [data, setData] = useState([]);

            //GET   

            async function getData() {  
            const res = await fetch("http://yourURL");  
            const data = await res.json();  
            setData(data);      
            }

            //UseEffect

            useEffect(() => {   
            getData();  
            }, []);


            //...inside return()

            return(
            {data
              //if you want to filter for a spec id 
              .filter(({ id }) => id === 0)
              //go through data                 
              .map(pokemon => (             
                <yourComponent            
                  key={pokemon.id}  
                  name={pokemon.name}   
                  sprites={pokemon.prites}  
                  ...   
                />  
              ))}
             )
            }
    export default Foo

希望对你有帮助!