React组件中使用Prop设置open状态为何始终为null？

核心问题 #

你在构造函数里调用this.setState是错误用法——构造函数属于组件初始化阶段，此时state还未被创建，调用setState不仅无法同步更新状态，还会导致状态初始化异常。你看到this.state.open为null，本质是因为构造函数里的setState没有正确完成状态初始化，未显式定义的状态字段会默认呈现null或undefined。

修正代码 #

直接在构造函数中初始化state，不要使用setState：

constructor(props: any) {
    super(props);
    this.state = {
        customUser: props.customUser,
        open: props.open
    };
}

额外说明 #

如果后续父组件传递的open props发生变化，需要同步更新子组件的open状态，可通过以下两种方式处理：

• 使用componentDidUpdate生命周期：

componentDidUpdate(prevProps: any) {
    if (prevProps.open !== this.props.open) {
        this.setState({ open: this.props.open });
    }
}

• 使用getDerivedStateFromProps（更符合React规范的静态生命周期方法）：

static getDerivedStateFromProps(nextProps: any, prevState: any) {
    if (nextProps.open !== prevState.open) {
        return { open: nextProps.open };
    }
    return null;
}

内容的提问来源于stack exchange，提问作者Roan128