javascript - 包装组件不会在 HOC 中重新渲染

Question

当初始化我的应用程序时，我的组件首先显示 Preloader，然后 HOC 向服务器发出请求并更新数据。但出于某种原因，它没有重新渲染组件。

高级组织:

export default function withData(WrappedComponent}) {
    return class extends React.Component {
        constructor(props) {
            super(props);

            this.state = {
                data: null
            }
        }

        componentDidMount() {
            if (this.state.data === null) {
                Upload(location.origin + location.pathname).then(data => {
                    this.setState({data});
                });
            }
        }

        render() {
            console.log(1, this.state.data);

            return <WrappedComponent {...this.props} data={this.state.data}/>;
        }
    };
}

包装组件

class Component extends React.Component {
    constructor(props) {
        super(props);

        console.log(2, props.data);

        this.state = {
            data: props.data
        }
    }

    render() {
        if (this.state.data === null) {
            return <div>Loading</div>;
        }

        return <div>Done</div>;
    }
}

export default withData(Component);

当我在控制台中运行时，我看到:

1 null
2 null
1 {.....}

Component第二次没有重新渲染

Answer 1

您只能在构造函数中首次实例化时将数据设置到组件的状态中。

不要将其复制到状态中。只需阅读 this.props.data 即可。