Question

我有一个有两个孩子的组件：

用户在其中输入并选择主题的组件
根据前一个组件中选定的主题呈现结果的组件

这是父组件的代码：

import SearchBox from "../../components/SearchBox";
import Results from "../../components/Results";

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTopic: null,
        };
    }

    onSelectTopic = (topic) => this.setState({
        selectedTopic: topic,
    });

    render() {
        return (
            <div>
                <SearchBox
                    onSelectTopic={this.onSelectTopic}
                />
                <Results
                    key={this.state.selectedTopic && this.state.selectedTopic.id}
                    selectedTopic={this.state.selectedTopic}
                />
            </div>
        );
    }
}

export default Home;

基本上，SearchBox组件会更新将选择内容传播到Results组件的父组件的状态。

Results组件具有其自己的状态，我希望在传递新选择时清除该状态。像上面的代码片段一样，我没有在Results中使用getDerivedStateFromProps来清除其状态，而是在<Results key={...}/>中添加了一个密钥。

我期望每次父组件中的状态更新时（即，上面调用了onSelectTopic方法），都会重新创建Results组件，但是该组件不会在更新时更新所有。我想念什么吗？如果我删除其key属性，则Results将按预期更新（即不清除其内部状态，这是我想通过使用key实现的功能）

顺便说一句，我使用的是preact而不是反应，但我的理解是，有关组件上key属性的行为是相同的。

在组件中设置键不会在状态更新时重新呈现该组件

0 个答案: