this.setState 后表单未重置 - 反应答案

【问题标题】：Form not resetting after this.setState - Reactthis.setState 后表单未重置 - 反应
【发布时间】：2019-11-16 10:55:46
【问题描述】：

尝试重置搜索输入字段但 setState 无法正常工作

我已经尝试了几个堆栈溢出响应，但我很确定我错过了一些非常小的东西。只是不确定是什么

我有一个状态：位于 App.js 中的 searchInput，我将它传递到搜索字段中的 Search Input 组件中，如下所示：

SearchInputComponent.js

// the Search and SearchInput are styled components so basically div and an input
  <Search>
    <SearchInput
      type="text"
      onChange={this.props.updateSearch}
      name="searchInput"
      value={this.props.searchInput}
      placeholder="Search for a food..."
    />
    <SearchButton onClick={this.props.getFoodData}>Search</SearchButton>
  </Search>

我知道 searchInput 正在传递，因为我能够在字段中看到输入的项目。

我有一个名为 getFoodData 的函数，它搜索有关 searchInput 的 api，我能够得到结果

App.js - searchInput 状态位于此处，并在输入字段中输入时更改

updateSearch = e => {
 this.setState({
   [e.target.name]: e.target.value
 });
};

//Code to check the API:  

getFoodData = food => {
food = this.state.searchInput;
let encodedFood = food.replace(" ", "%20");
this.setState({ showModal: true});
axios
  .get(
    `https://api.edamam.com/api/food-database/parser?ingr=${encodedFood}&app_id=${EDAMAM_API_ID}&app_key=${EDAMAM_API_KEY}`
  )
  .then(response => {
    console.log('pre-reset', this.state.searchInput);
    this.setState({
      searchResults: response.data.hints,
      searchInput: "",
      noResultError: "",
      resultsLoading: false
    });
    console.log("search results", this.state.searchResults);
    console.log("search input", this.state.searchInput);
  })
  .catch(error => {
    this.setState({
      searchInput: "",
      noResultError: "No results found",
      showModal: true,
      searchResults: []
    });
    console.log("error", error);
  });

};

这些函数随后被传递到 JSX 中的 SearchInputComponent 中

        <SearchInputComponent
        updateSearch={this.props.updateSearch}
        searchInput={this.props.searchInput}
        getFoodData={this.props.getFoodData}
      />

我是否遗漏了一些关于为什么这没有清除搜索字段的内容，即使我的 searchInput 在响应后被重置？我可以在重置之前和重置之后在控制台中看到它，并且 searchInput 正在清除。

我希望搜索字段清除原始占位符以显示甚至是空字段。

【问题讨论】：

你的<Search>和api调用代码是怎么安排的？
我编辑了问题以更好地显示文件结构。这些函数存在于 App.just 中以拥有一个主要的父组件。而 SearchInputComponent 是一个子组件，它从 App.js 获取函数和状态作为道具。有几层 App --> Header --> NavBar --> SearchInput，但每个 prop 都在层与层之间传递。我知道可以使用 Redux，因为道具钻孔的噩梦，但目前不是一个选择，因为这个项目只在 React 中完成。只是想看看我是否错过了什么。
在组件中传递函数时，不确定为什么使用 {this.props.}。如果您将函数传递给另一个组件，则无需使用“道具”。尝试从 {this.props.updateSearch} 和其他 2 个参数中删除道具。如果这不起作用，您能否提供更多组件抛出的错误日志？
@dp_chua 你能提供一个最少代码的沙盒示例吗？
实际上发现了错误，这是传递 props 时的一个简单的错字。我有一个第三个组件，我必须通过它才能将它传递给特定的组件并且出现错误。

标签： reactjs

【解决方案1】：

如果我理解正确，您应该在 SearchInputComponent 中使用 componentWillReceiveProps 在道具更改时更新 SearchInputComponent 状态。在SearchInputComponent 中，最初设置您的状态时，将状态值设置为道具值this.state = { searchInput: this.props.searchInput } 并使用this.state.searchInput 作为字段值。

【讨论】：