如何设置状态从 APi 回答并使用地图 [英] How to setState to answer from APi and use map

问题描述

我正在尝试创建食谱搜索器.在 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 回答并使用地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！