Question

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

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 {.....}

第二次不重新提交Сomponent

Answer 1

只有在首次实例化时，才在构造函数中将数据设置为组件的状态。

请勿将其复制到状态。只需阅读this.props.data即可。

Answer 2

解决我的问题的方法。

感谢社区的帮助。

class Component extends React.Component {
    render() {
        if (this.props.data === null) {
            return <div>Loading</div>;
        }

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

export default withData(Component);

包装的组件未在HOC中重新渲染

2 个答案: