我想要 React js 中 ComponentDidMount 和 ComponentDidUpdate 的组合功能

Question

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

  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```

Answer 1

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

componentDidMount() {
    this.setState({searchQuery: 'checken'});
}

Answer 2

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

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

并在 function 中获取数据，在 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();
}