javascript - 高阶组件不触发 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 传回的新值进行更新。事实上，子渲染甚至在初始安装后都没有触发，而且似乎没有在任何更改的事件上触发。

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

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

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

再次感谢。

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;
};

工作演示