reactjs - Axios to get data from database

Question

export class Diet extends Component {
  constructor(props) {
    super(props);
    this.state = {
          data: [],
         };
  }
 updateSearch = (e) => {
    axios
      .get(
        `https://api.spoonacular.com/food/products/searchapiKey{1234}&query=${this.state.data}&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>
                {data.parsed.map(({ type }) => (
                  <Text>{this.state.type.products.title}</Text>
                ))}
              </TouchableOpacity>
            </List>

Hi, I'm trying to get data from the Spoonacular database using axios, I'm trying to search the food with the SearchBar and display the content in the List, I'm new to programming and I'm not very sure of what I'm doing, when I run the code it tells me undefined is not an object (evaultaing 'data.parsed.map'), also it this the right way to use SearchBar to get data.

Link to the documentation: https://spoonacular.com/food-api/docs#Search-Grocery-Products

标签： reactjsreact-nativeapiaxios

Answer 1

you just miss this.state.data

             <TouchableOpacity>
                {this.state.data.map(({ type }) => (
                  <Text>{this.state.type.products.title}</Text>
                ))}
              </TouchableOpacity>