![回答并使用地图]( "回答并使用地图")
本文介绍了如何设置状态从 APi 回答并使用地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试创建食谱搜索器.在 App.js 中，我收到来自另一个组件的搜索输入的查询，我想 setState 从 APi 回答.setState 中回调的 Console.log 显示更新状态，但状态未更新.我需要更新 setState 以便我可以在其上使用 map 并在 render 中显示食谱列表.它给我错误 map is not a function 因为 this.state.recipesList 仍然是空的.任何人都可以帮助我吗?
class App 扩展组件 {状态 = {询问: ""，食谱列表:[]};getQuery = 查询 =>{const key = "2889f0d3f51281eea62fa6726e16991e";const URL = `https://www.food2fork.com/api/search?key=${key}&q=${query}`;获取(网址).then(res => res.json()).then(res => {这个.setState({食谱列表:res},() =>{console.log(this.state.recipesList);});});console.log(this.state.recipesList);};使成为() {const test = this.state.recipesList.map(item => {返回 (<div className="recispesList"><h1>{item.title}</h1>
);});返回 (<div className="应用程序"><搜索查询={this.getQuery}/><div className="contentWrapper">{}</div>
);}}
搜索组件:
class Search extends Component {状态 = {搜索值:"};handleChange = val =>{让 searchValue = val.target.value;this.setState({搜索值});};handleSubmit = e =>{e.preventDefault();this.setState({搜索值:"});this.props.query(this.state.searchValue);};使成为() {返回 (<div className="searchWrapper"><form onSubmit={this.handleSubmit}><input onChange={this.handleChange} value={this.state.searchValue}/><按钮/></表单>
);}}导出默认搜索；
解决方案
似乎不是直接将整个响应分配给recipesList:
this.setState({食谱列表:res},() =>{console.log(this.state.recipesList);});
你需要先通过res.recipes获取recipes数组:
this.setState({食谱列表:res.recipes},() =>{console.log(this.state.recipesList);});
Im trying to create recipes searcher. In App.js I receive query from search input from another component and I want to setState to answer from APi. Console.log from callback in setState shows updated state but the state is not updated. I need setState updaed so I can use map on it and display list of recipes in render. It gives me error map is not a function because this.state.recipesList is still empty. Anyone can help me ?
class App extends Component {
state = {
query: "",
recipesList: []
};
getQuery = query => {
const key = "2889f0d3f51281eea62fa6726e16991e";
const URL = `https://www.food2fork.com/api/search?key=${key}&q=${query}`;
fetch(URL)
.then(res => res.json())
.then(res => {
this.setState(
{
recipesList: res
},
() => {
console.log(this.state.recipesList);
}
);
});
console.log(this.state.recipesList);
};
render() {
const test = this.state.recipesList.map(item => {
return (
<div className="recispesList">
<h1>{item.title}</h1>
</div>
);
});
return (
<div className="App">
<Search query={this.getQuery} />
<div className="contentWrapper">{}</div>
</div>
);
}
}
Search component:
class Search extends Component {
state = {
searchValue: ""
};
handleChange = val => {
let searchValue = val.target.value;
this.setState({
searchValue
});
};
handleSubmit = e => {
e.preventDefault();
this.setState({
searchValue: ""
});
this.props.query(this.state.searchValue);
};
render() {
return (
<div className="searchWrapper">
<form onSubmit={this.handleSubmit}>
<input onChange={this.handleChange} value={this.state.searchValue} />
<button />
</form>
</div>
);
}
}
export default Search;
解决方案
It seems that instead of directly assigning the whole response to recipesList:
this.setState(
{
recipesList: res
},
() => {
console.log(this.state.recipesList);
}
);
you need to get recipes array first via res.recipes:
this.setState(
{
recipesList: res.recipes
},
() => {
console.log(this.state.recipesList);
}
);
这篇关于如何设置状态从 APi 回答并使用地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！