高阶组件未触发ReactJS中的包装渲染

Question

我正在使用一个高级组件，该组件不会在渲染更改时渲染子级。为了简单起见，下面的代码已被砍掉。

如下所示的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;

然后我有一个使用此HOC的子组件：

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

export default withMyComponent(myChildComponent);

我遇到的问题是input没有使用从HOC传回的新值进行更新。实际上，在初始安装后，子渲染甚至不会触发，并且似乎也不会在任何更改的事件上触发。

我已将调试和console.logs放在HOC渲染中，并且更改后的事件和渲染使用正确的数据触发。

因此，如果我在文本框中键入内容，它将在HOC中触发change事件，并在HOC中更新状态，并在HOC中触发render事件。但这不会触发包装的组件的render事件，因此文本框永远不会更新任何值。

有人能解决这个问题或引导我朝正确的方向前进吗？

再次感谢。

Answer 1

您需要将一个对象传递给git push --force origin z99909W:branchA

this.setState

工作演示