javascript - React 不会在 props 改变时重新渲染

Question

我有以下代码，目标是为 ajax POST 操作准备一些对象。所以实际上我有几个<input/> ，为某个对象提供数据片段。我只是将其简化为简短且易于理解。

var MyComponent = React.createClass({
    onChange (value) {
       var newValue = this.props.value;
       newValue.field = value;
       this.props.dispatch(setValue(newValue));
    },

    render: function () {
      return (
        <myOtherComponent>
           <div><input onChange={this.onChange}/></div>
           <div>this.props.value</div>
        </myOtherComponent>
              )
    }
});

我还有一个行动:

export function setValue(value) {
    return {
        type: 'VALUE',
        data: value
    }
};

还有reducer，其中包含:

case 'NEW_DOCTOR':
            return {
                ...state,
                value: action.data
            };

问题是当我这样做 this.props.dispatch(setValue(newValue)); 时，虽然我在 console.log 中看到该 reducer 肯定被解雇了，<myOtherComponent>不重新渲染。所以我必须输入this.setState(this.state)之后this.props.dispatch(setValue(newValue)); ，然后它重新渲染。我第二次看到这种行为，真的不明白我做错了什么。有什么线索吗？

Answer 1

不确定这是问题的原因，但在这段代码中:

onChange (value) {
  var newValue = this.props.value;
  newValue.field = value;
  this.props.dispatch(setValue(newValue));
},

您正在直接改变 props，这是不应该的。

由于newValue = this.props.value，
语句newValue.field = value
也会改变 this.props.value。