Reactjs 使用搜索栏从API获取数据 导出类饮食扩展组件{ 建造师（道具）{ 超级（道具）； 此.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（）{ 常数{ 数据， 搜索值， }=本州； 返回( ( {this.state.type.products.title} ))}

您好，我正在尝试使用

搜索栏和
axios
从Spoonacular API获取数据，运行代码时出现以下错误：
undefined不是函数（靠近“…this.state.data.map…”）

数据库文档链接：
我认为您的问题在于您试图使用

将地图替换为


(
{item.products.title}
))}
keyExtractor={item=>item.id}
/>
看起来您并没有在映射数据中实际使用迭代值。尝试将
this.state.type.products.title
替换为
type.products.title
。感谢您的回答，但它不起作用谢谢您的回答，错误将不再显示，但是
平面列表现在保持空白，它不会显示任何内容这是正常的，因为您的状态“数据”是一个空数组（[]）。平面列表将在他的道具“数据”中循环，并使用“renderItem”中给出的函数渲染组件。答案中给出的代码可能是错误的，因为我不知道您想要显示什么。通过在“数据”中指定一个固定值来尝试。
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}
            <List style={{ paddingTop: hp("2%") }}>
              <TouchableOpacity>
                {this.state.data.map(({ type }) => (
                  <Text>{this.state.type.products.title}</Text>
                ))}
              </TouchableOpacity>
            </List>