React高阶组件状态变更未传props，组件控制台打印值但视图不更新

问题根源 #

这段代码里最致命的错误是直接修改this.state——React组件的状态必须通过setState()方法更新，直接给this.state赋值不会触发组件重新渲染。所以5秒后虽然改了loading的值，但组件没重新render，MyComponent自然拿不到更新后的属性，视图也就一直显示初始的true。

修复后的完整代码 #

import React from "react";

const withLoading = (WrappedComponent) => {
    class WithLoading extends React.Component {
        constructor(props) {
            super(props)
            this.state = { loading: true };
        }

        componentDidMount() {
            setTimeout(() => {
                console.log("setTimeout")
                // 必须用setState更新状态，触发重新渲染
                this.setState({ loading: false });
            }, 5000)
        }

        render() {
            console.log("render", this.state.loading)
            return <WrappedComponent {...this.props} loading={this.state.loading} />;
        }
    }

    WithLoading.displayName = `withLoading(${WrappedComponent.displayName || WrappedComponent.name})`;

    return WithLoading;
}

function MyComponent({ loading }) {
    console.log("MyComponent loading", loading)
    return (<p>is loading:{loading}</p>)
}

const hoc = withLoading(MyComponent);

export default hoc

关键说明 #

• 原代码里的props传递是没问题的（{...this.props}已经把外部传入的props都传给了被包裹的组件），问题完全出在状态更新的方式上。
• 使用setState()后，React会检测到状态变化，重新调用WithLoading的render方法，把更新后的loading: false传递给MyComponent，此时控制台会打印新的loading值，视图也会同步更新。

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