Javascript 高阶组件未在ReactJS中触发包装器渲染

我使用的是一个高阶组件，它不会在渲染更改时渲染子级。为了简单起见，下面的代码已被删减

这个HOC看起来像这样：

const withMyComponent = (WrapperComponent) => {
    class HOC extends Component {
        state = {
            value: ''
        };

        changedHandler = (event) => {
            this.setState({ value: event.target.value });
        };

        render() {
            return (<WrapperComponent {...this.props}
                changed={this.changedHandler}
                value={this.state.value} />);
        }
    };

    return HOC;
};

export default withMyComponent;

const with mycomponent=（WrapperComponent）=>{
类HOC扩展组件{
状态={
值：“”
};
changedHandler=（事件）=>{
this.setState（{value:event.target.value}）；
};
render（）{
返回（）；
}
};
返回HOC；
};
使用MyComponent导出默认值；

然后我有一个子组件，它使用这个HOC：

class myChildComponent extends Component {
    render() {
        return (
            <input type="text"
                onChange={(event) => this.props.changed(event)}
                value={this.props.value || ''} />
        );
    };
};

export default withMyComponent(myChildComponent);

类myChildComponent扩展组件{
render（）{
返回(
this.props.changed（事件）}
value={this.props.value | |“”}/>
);
};
};
使用MyComponent（myChildComponent）导出默认值；

我遇到的问题是，

输入

没有使用从HOC传回的新值进行更新。事实上，在初始装载之后，子渲染甚至没有启动，并且似乎没有在任何更改的事件上启动

我已将调试和

控制台放置在HOC呈现中，日志

，已更改的事件和呈现将使用正确的数据触发

因此，如果我在文本框中键入，它将在HOC中激发change事件并更新HOC中的状态，并在HOC中激发render事件。但它不会触发wrapped components render事件，因此文本框永远不会使用任何值更新

有谁能解决这个问题，或者带领我走向正确的方向

---

再次感谢。

您需要将对象传递给此。设置状态

const with mycomponent=WrapperComponent=>{
类HOC扩展组件{
状态={
值：“”
};
changedHandler=事件=>{
//而不是
//this.setState（值：event.target.value）；
//这样做。
this.setState（{value:event.target.value}）；
};
render（）{…}
}
返回HOC；
};

工作演示

---

除了

this.setState（value:event.target.value）

typo（参数应该是一个对象）之外，您的示例对我很好。在进行更改后，它仍然不适用于我：（此问题已解决。原因是使用了多个HOC（示例中未显示）的顺序。此问题已解决。原因是使用了多个HOC（示例中未显示）的顺序。