Reactjs 带API数据库的搜索栏 导出类饮食扩展组件{ 建造师（道具）{ 超级（道具）； 此.state={ 数据：[]， }; } 更新搜索=（e）=>{ axios .得到( `https://api.spoonacular.com/food/products/search?apiKey{1234}&query=${data}&number=100` ) 。然后（（res）=>{ this.setState（{data:res.data}）； }) .catch（（错误）=>{ console.log（error.response.data）； }); }; render（）{ 返回( {this.state.data.map（{type}）=>( {this.state.type.products.title} ))} ); } }

大家好，我正在尝试构建一个

SearchBar

，当我在

SearchBar

中键入时，URL中的变量

query

应该更改为我正在键入的内容，因为现在当我运行时，它不会返回任何内容

---

链接到数据库文档：

如果您对接收到的数据使用相同的状态，并且该值在搜索栏中输入，请首先创建另一个状态以保留输入值并将其传递到URL中

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}&query=${data}&number=100`
      )
      .then((res) => {
        this.setState({ data: res.data });
      })
      .catch((error) => {
        console.log(error.response.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>
      </>
    );
  }
}

---

您对接收到的数据使用相同的状态，并且该值在搜索栏中输入，首先创建另一个状态以保留输入值并将其传递到URL中

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}&query=${data}&number=100`
      )
      .then((res) => {
        this.setState({ data: res.data });
      })
      .catch((error) => {
        console.log(error.response.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>
      </>
    );
  }
}

---

你是最好的男人，谢谢你！！现在它给了我一个不同的

错误：undefined不是一个函数（靠近“…this.state.data.map”）

，很抱歉有这么多问题，我对这个还不熟悉，还在学习。你是最好的朋友，谢谢！！现在它给了我一个不同的

错误：undefined不是一个函数（靠近“…this.state.data.map”）

，很抱歉有这么多问题，我对这个问题还不熟悉，还在学习中。

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