Переданный параметр не определен в функции и в обратном вызове. Определено в другом месте - PullRequest
Новая
       6

Переданный параметр не определен в функции и в обратном вызове. Определено в другом месте

1 голос
/ 07 октября 2019

Я уверен, что здесь есть что-то глупое, что я упускаю из виду, но заранее благодарю.

Я пытаюсь передать реквизит моей добыче. 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>
    )
}

Спасибо!

1 Ответ

0 голосов
/ 07 октября 2019

Я не могу понять, где вы берете param1 из вашего JSON (я думаю). В любом случае вы не должны вызывать fetch внутри рендера.

Вы можете использовать React Hooks (см. Здесь => https://it.reactjs.org/docs/hooks-intro.html) для упрощения кода.

fe: 

     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

Надеюсь, это поможет!

...