Question

我有两个组件，父组件App和子组件SearchBar，我希望SearchBar保持自己的状态，并在更新其状态后调用其父级给出的函数作为将更新其父级状态的prop。

所以在我的SearchBar组件上我有

onSearchChange(event) {
        .
        .
        .
        this.setState({ searchTerm });

    }

然后

componentDidUpdate(){
    this.props.onSearchChange(this.state.searchTerm)
}

在父组件上

onSearchChange(searchTerm){
    this.setState({searchTerm});
}
render() {
    return (
        <div className="App">

            <div>
                <SearchBar onSearchChange={this.onSearchChange}/>
            </div>
            .
            .
            .
        </div>
    );
}

但这会导致无限循环，其中调用SearchBar的componentDidUpdate，调用其父onSearchChange来更新父状态，然后SearchBar的componentDidUpdate再次调用它。

如果我在setState中使用回调而不是componentDidUpdate来更新其父状态它可以正常工作，但我只是不明白为什么SearchBar如果它的prop为常量而更新它。

Answer 1

componentDidUpdate提供两个参数prevProps和prevState，用它可以检查实际的道具或状态是否已经改变，然后对当前状态/道具进行更改...例如：

componentDidUpdate(prevProps, prevState){
if(prevState.searchTerm !== this.state.searchTerm) {
   this.props.onSearchChange(this.state.searchTerm)
  }
}

在父组件上调用setstate会强制其子组件上的componentDidUpdate？

1 个答案: