传递的参数在函数和回调中未定义。在其他地方定义
我确定这里有些不可思议的地方,但是请先谢谢。
我正在尝试将道具传递给我的收藏夹。 location.param1
显示正常,而fetchData()调用内的同一内容显示为未定义。即使在初始显示后被调用,也是如此。
这里输入代码...
fetchData = (name) => {
console.log(name)
fetch(`/${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>
)
}
谢谢!
回答如下:我看不到您在哪里从json提取param1(我认为)。无论如何,您不应该在渲染器内部调用提取。
您可以使用React Hooks(请参阅此处=> https://it.reactjs/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
希望有帮助!