从 API 获取数据后，FlatList 保持空白

Question

export class Diet extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      searchValue: "",
    };
  }
  updateSearch = (value) => {
    this.setState({ searchValue: value });
    if (value.trim() !== "") {
      axios
        .get(
          `https://api.spoonacular.com/food/products/search?apiKey=1234&query=${value}&number=100`
        )
        .then((res) => {
          this.setState({ data: res.data });
        })
        .catch((error) => {
          console.log(error.response.data);
        });
    } else {
      setState({ data: [] });
    }
}}

  render() {
    const {
      data,
      searchValue,
    } = this.state;


    return (
          <SearchBar
            placeholder="Search Food..."
            onChangeText={this.updateSearch}
            value={searchValue}
            <FlatList
              data={this.state.data}
              renderItem={({ item }) => (
                  <Text>{item.products.title}</Text>
                      )}
              keyExtractor={item => item.id}
            />

大家好，我想通过在SearchBar中搜索在Flatlist中显示Spoonacular API的产品，我运行代码时没有显示错误，但是Flatlist 只是保持空白，这是怎么回事？

Link 到数据库的文档：https://spoonacular.com/food-api/docs#Search-Grocery-Products

Answer 1

响应数据形状为

{
    "products": [
        {
            "id": 192386,
            "title": "Pizza Buddy: Frozen Pizza Dough, 16 Oz",
            "imageType": "jpg"
        },
        {
            "id": 27693,
            "title": "Uno Pizza",
            "imageType": "jpg"
        }
    ],
    "totalProducts": 1258,
    "type": "product",
    "offset": 0,
    "number": 2
}

products 是应该传递给 flatlist 的数组。

<FlatList
  data={this.state.data.products} // <-- pass the products array from state
  renderItem={({ item }) => (
    <Text>{item.title}</Text> // <-- it is just item.title
  )}
  keyExtractor={item => item.id}
/>

虽然这需要 this.state.data 是一个对象，因此最好只使用 products 数据更新状态。

updateSearch = (value) => {
  this.setState({ searchValue: value });
  if (value.trim() !== "") {
    axios
      .get(
        `https://api.spoonacular.com/food/products/search?apiKey=1234&query=${value}&number=100`
      )
      .then((res) => {
        this.setState({ data: res.data.products });
      })
      .catch((error) => {
        console.log(error.response.data);
      });
  } else {
    setState({ data: [] });
  }
}}

然后照常通过

<FlatList
  data={this.state.data}
  renderItem={({ item }) => (
    <Text>{item.title}</Text> // <-- it is just item.title
  )}
  keyExtractor={item => item.id}
/>

从 API 获取数据后，FlatList 保持空白

FlatList stays blank after getting data from API

javascript

reactjs

react-native

axios

react-native-flatlist