Не обрабатывать отказ от обещания, получение данных из API

Question

      export class Diet extends Component {
  constructor(props) {
    super(props);
    this.state = {
          data: [],
         };
  }
 updateSearch = (e) => {
    axios
      .get(
        `https://api.spoonacular.com/food/products/search?apiKey{1234}&number=100`
      )
      .then((res) => {
        this.setState({ data: res.data });
      });
  };
   render()
      return(
            <SearchBar  
               placeholder="Search Food..."
               onChangeText={this.updateSearch}
               value={data}
             />
            <List style={{ paddingTop: hp("2%") }}>
              <TouchableOpacity>
                {this.state.data.map(({ type }) => (
              <Text>{this.state.type.products.title}</Text>
            ))}
              </TouchableOpacity>
            </List>

Привет всем, я пытаюсь получить данные из базы данных Spoonacular, используя axios, Я пытаюсь найти еду с помощью SearchBar и отображать содержимое в списке, я новичок в программировании и не очень уверен в том, что делаю, когда я запускаю код, он сообщает мне [Unhandled promise rejection: Error: Request failed with status code 400] и в списке ничего не отображается.

Ссылка на документацию: https://spoonacular.com/food-api/docs#Search-Grocery-Products

Answer 1

Вам не хватает queryпараметр. Согласно документации это необходимо. Таким образом, правильный запрос будет примерно таким:

      let query = ...; //get hte value from the searchbar
axios
  .get(
    `https://api.spoonacular.com/food/products/search?query=${encodeURIComponent(query)}&apiKey=1234&number=100`
  )
  .then((res) => {
    this.setState({ data: res.data });
  })
  .catch(error => {
    console.log(error.response.data);
  });

Тело сообщения об ошибке, вероятно, будет содержать подсказку ...