Question

我有一个输入字段，用于过滤数组中的元素。

我认为搜索结果始终是一个按键，因为setState不会立即更新视图？解决此问题的最佳方法是什么？

class App extends Component {
  constructor() {
    super();
    this.state = {
      images:[],
      searchfield: '',
      filteredImages:[],
      suggestedKeywords:[],
      inputValue: ''
    }
  }

  onSearchChange = (event) => {
    this.setState({searchfield: event.target.value});
    this.setState({inputValue: event.target.value});
    let filteredImages = this.state.images.filter(image => {
      return image.labels.includes(this.state.searchfield.toLowerCase());
    });
    console.log(event.target.value);
    this.setState({filteredImages});
  }
}

const SearchBox = ({searchfield, searchChange, inputValue}) => {
  return (
    <div>
      <input 
      type="search"
      value={inputValue}
      onChange={searchChange}
      placeholder="Search images..."
      />
    </div>
  );
}

Answer 1

我认为搜索结果始终是一个按键，因为setState不会立即更新视图？解决此问题的最佳方法是什么？

那不是问题。

您的问题是您假设对setState的更新会立即发生。

this.setState({searchfield: event.target.value}); //You update searchfield here
return image.labels.includes(this.state.searchfield.toLowerCase()); 
//but this.state.searchfield doesn't reflect the update yet!

因此，只需处理更新后的值，而不是商店中的值即可。

return image.labels.includes(event.target.value.toLowerCase());

Answer 2

class Program { static void Main(string[] args) { string input = @"oaaawaala"; string word = "Owl"; string pattern = Regex.Replace(word, ".", ".*$0"); RegexOptions options = RegexOptions.Multiline | RegexOptions.IgnoreCase; var found = Regex.Matches(input, pattern, options).Count > 0; Console.WriteLine("Found: {0}", found); } }是异步的，因此您在执行setState时将被旧的searchfield过滤。考虑到这一点，您可以改为执行以下操作：

this.state.searchfield.toLowerCase()

React setState不立即更新组件视图

2 个答案: