未处理的承诺拒绝，从 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>

大家好，我正在尝试使用 axios 从 Spoonacular 数据库中获取数据，我正在尝试使用 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);
  });

错误响应的主体可能会包含一个提示...