Question

我的组件搜索器具有函数SearchArticle（），它在组件安装后正确使用 this.state.search 和DEFAULT值（控制台显示搜索...：DEFAULT ）。但是当我用handleKeyPress（e）更新 this.state.search 时，它们的相同函数SearchArticle（）在更新为e.target值之前使用了prev状态（控制台显示< em>搜索...：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() here。


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

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

[...]

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

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

1 个答案: