Как установитьState для ответа из APi и использовать карту - PullRequest
Новая
       9

Как установитьState для ответа из APi и использовать карту

0 голосов
/ 30 мая 2019

Я пытаюсь создать рецепт поисковика. В App.js я получаю запрос из поискового ввода из другого компонента и хочу setState ответить от APi. Console.log из обратного вызова в setState показывает обновленное состояние, но состояние не обновляется. Мне нужно setState обновить, чтобы я мог использовать map и отображать список рецептов в render. Это дает мне карту ошибок не является функцией, потому что this.state.recipesList все еще пуст. Кто-нибудь может мне помочь? 

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>
    );
  }
}

Компонент поиска: 

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;

1 Ответ

1 голос
/ 30 мая 2019

Кажется, что вместо непосредственного присвоения всего ответа recipesList: 

this.setState(
  {
    recipesList: res
  },
  () => {
    console.log(this.state.recipesList);
  }
);

вам нужно сначала получить массив recipes через res.recipes: 

this.setState(
  {
    recipesList: res.recipes
  },
  () => {
    console.log(this.state.recipesList);
  }
);
...