高阶组件未触发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

您需要将一个对象传递给this.setState

const withMyComponent = WrapperComponent => {
  class HOC extends Component {
    state = {
      value: ""
    };

    changedHandler = event => {
      // Instead of 
      // this.setState( value: event.target.value );

      // Do This.
      this.setState({ value: event.target.value });
    };

    render() { ... }
  }

  return HOC;
};

工作演示