React setState不立即更新组件视图

Question

I have a input field that is filtering the elements on of an array.

The search results are always one keystroke behind, I assume because setState doesn't instantly update the view? What's the best way to work around that?

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

The search results are always one keystroke behind, I assume because setState doesn't instantly update the view? What's the best way to work around that?

That isn't the problem.

Your problem is that you are assuming updates to setState occur instantly.

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!

So instead, simply work off of the updated value rather than the one from the store.

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

Answer 2

setState is asynchronous, so you will be filtering by the old searchfield when you do this.state.searchfield.toLowerCase() . With this in mind you could do something like this instead:

onSearchChange = (event) => {
  const { value } = event.target;
  const newState = {
    searchField: value,
    inputValue: value
  };

  newState.filteredImages = this.state.images.filter(image => {
    return image.labels.includes(value.toLowerCase());
  });

  this.setState(newState);
}