如何设置状态从 APi 回答并使用地图

本文介绍了如何设置状态从 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 = `www.food2fork/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 = `www.food2fork/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); } );