Question

尝试重置搜索输入字段，但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清除之后，我可以在控制台中看到它。

我希望搜索字段可以用原来的占位符清除，以显示甚至是空白字段。

Answer 1

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

表单在this.setState之后未重置-React

1 个答案: