Javascript 从API获取数据后，FlatList保持空白 导出类饮食扩展组件{ 建造师（道具）{ 超级（道具）； 此.state={ 数据：[]， 搜索值：“”， }; } updateSearch=（值）=>{ this.setState（{searchValue:value}）； 如果（value.trim（）！==“”）{ axios .得到( `https://api.spoonacular.com/food/products/search?apiKey=1234&query=${value}&number=100` ) 。然后（（res）=>{ this.setState（{data:res.data}）； }) .catch（（错误）=>{ console.log（error.response.data）； }); }否则{ setState（{data:[]}）； } }} render（）{ 常数{ 数据， 搜索值， }=本州； 返回( 项目id} />

大家好，我在搜索栏中搜索，试图在平面列表中显示Spoonacular API的产品，运行代码时没有显示错误，但平面列表保持空白，这有什么问题

---

数据库文档链接：

响应数据形状为

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}
            />

products

是应传递到平面列表的数组

{
    "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
}

然后照常通过

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: [] });
  }
}}

(
{item.title}//item.id}
/>

如何在

搜索栏中调用
updateSearch
？您是否已成功获取请求以实际填充您的状态？在setState之前放置一个控制台以查看数据是否正确获取：
console.log（res.data）；
示例对象没有
products
键，因此此
{item.products.title}
应该是
{item.title}
？尝试console.log（data）inside render（）我尝试了你的示例，它给了我以下错误：
未定义不是对象（评估'this.state.data.products'）
@piersalvomiglier是的，我意识到在我离开后会发生这种情况。更新了我的答案，请再次检查。
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}
/>