0

我正在使用 axios 获取 API 数据，并且该 API 具有查询参数（例如：searchQuery，在状态中定义）。我已经在 componentDidUpdate 中声明了它的 state 和 axios 调用的初始值。现在我希望我的用户以提交时将更改“seachQuery”状态的表单输入数据。问题来了，我想根据用户的输入显示带有提供值和未来结果的初始结果，但它没有发生。初始结果没有显示，因为 componentDidUpdate 只会在更新后调用。如果我在 componentDidMount 中进行 axios 调用，则不会出现根据用户输入的结果。我只想使用基于类的组件来做到这一点。

  constructor(props) {
    super(props)
  
    this.state = {
      searchResult: [],
      formInput: "",
      searchQuery: "chicken",
    }
  }
componentDidUpdate(){
    axios.get(`https://api.edamam.com/search? 
       q=${this.state.searchQuery}&app_id=${this.state.APP_ID}&app_key=${this.state.APP_KEY}`)
            .then(res=>  
              this.setState(prevState =>({searchResult: prevState.searchResult.concat(res.data.hits)}))
              )
  }

onChangeHandler = (e) => {
    this.setState({
      formInput: e.target.value
    })
    console.log(e.target.value)



  }

  onSubmitHandler = (e) => {
    e.preventDefault()
    this.setState({
      searchQuery: this.state.formInput
    })
    // console.log(this.state.searchQuery)
    
    // setformInput("")
  }
  render() {
    return (
      <div className="App">
        <form className="search-form" onSubmit={this.onSubmitHandler}>
          <input className="search-bar" type="text" onChange={this.onChangeHandler} />
          <button className="search-button" type="submit">SEARCH</button>
        </form>
        <div className="recipes">
          {this.state.searchResult.map(singleRecipe => 
                          <Recipe key={singleRecipe.recipe.label} title={singleRecipe.recipe.label} calories={singleRecipe.recipe.calories} image={singleRecipe.recipe.image} ingredients={singleRecipe.recipe.ingredients}/>
          )}
        </div>
      </div>
    );
  }
}


export default App```
4

2 回答 2

0

我认为您可以在 componentDidMount 中设置状态（例如 searchQuery）。

componentDidMount() {
    this.setState({searchQuery: 'checken'});
}
于 2020-12-24T21:03:52.513 回答
0

为什么将 formInput 设置为用户输入，将 searchQuery 设置为 formInput onSubmit？只需将 searchQuery 设置为用户输入 onChange。

onChangeHandler = (e) => {
  this.setState({
    searchQuery: e.target.value
  });
  console.log(e.target.value);
}

并在函数中获取数据，在 componentDidMount 和 onSubmit 上使用它。

getData = () => {
  axios.get(`https://api.edamam.com/search? q=${this.state.searchQuery}&app_id=${this.state.APP_ID}&app_key=${this.state.APP_KEY}`)
    .then(res =>
      this.setState(prevState => ({ searchResult: prevState.searchResult.concat(res.data.hits) }))
    );
}

componentDidMount() {
  this.getData();
}

onSubmitHandler = (e) => {
  e.preventDefault();
  this.getData();
}
于 2020-12-25T10:00:59.067 回答