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中看到减速器肯定被触发，但<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));
},

你是直接改变道具，你不应该这样做。

自newValue = this.props.value以来，声明newValue.field = value
也会改变this.props.value。

React不会对道具更改进行重新渲染

1 个答案: