如何在React中更新和使用状态处理程序

Question

我有组件搜索器功能SearchArticle(),它正确使用this.state.search与组件安装后的DEFAULT值(控制台显示搜索...:DEFAULT).但是当我用handleKeyPress(e)更新this.state.search时,它们的相同函数SearchArticle()在更新为e.target值之前使用prev状态(控制台再次显示Searching ...:DEFAULT).不知道如何解决它.

class Searcher extends Component {

    constructor(props) {
        super(props);
        this.state = { 
            article: [], search: "DEFAULT"
        }; 
    }  

    searchArticle() { 
        console.log('Searching...: ', this.state.search)                                 
    }

    handleKeyPress = (e) => {
        if (e.key === 'Enter') {                            
            this.setState({search: e.target.value});
            this.searchArticle();
        }
    }

    componentDidMount() {
        this.searchArticle();     
    } 

    render() {
        return (
            <div className="row">
            Search: <input onKeyPress={this.handleKeyPress} type="text" />
            </div>            
        )
    }

}

Answer 1

很可能该状态在console.log执行时尚未更新.这是因为setState()是异步的.

所以试试这个:

handleKeyPress = (e) => {
  if (e.key === 'Enter') {                            
    this.setState({search: e.target.value}, () => {
       this.searchArticle();
    });       
  }
}

我把你searchArticle()带入了setState()回调.这将保证在状态实际更新后执行.

了解更多关于setState() 这里.

将其setState()视为请求而非立即更新组件的命令.为了获得更好的感知性能,React可能会延迟它,然后在一次通过中更新几个组件.React不保证立即应用状态更改.

setState()并不总是立即更新组件.它可以批量推迟更新或推迟更新.这使得this.state在调用setState()潜在陷阱后立即阅读.相反,使用componentDidUpdate或setState回调(setState(updater, callback)),其中任何一个都保证在应用更新后触发.

[...]

第二个参数setState()是一个可选的回调函数,它将在setState完成并重新呈现组件后执行.