Javascript Redux不会在还原后更新视图

已解决：字段表单中的默认值与我想象的不同

我不知道我在做什么[这里是化学狗图片]

我的组件称为loadForm，通过thunk操作从API调用加载数据：

class loadForm extends Component {
  constructor(props) {
   super(props);
  }
  /*  Loads data to the form */
  componentDidMount() {
    let action = getAppoThunk(this.props.routeParams.id);
    this.props.dispatch(action);
    console.log('DidMount  appoArray>>'+ JSON.stringify(this.props.appo));
 }

componentWillReceiveProps(nextProps) {
  if (Object.keys(nextProps.appoArrayProp).length  !=  Object.keys(this.props.appoArrayProp).length ) {
  console.log('WWWW  NOT THE SAME nextProps  >>'+ JSON.stringify(nextProps.appo));
  console.log('WWWW  NOT THE SAME thisProps  >>' + JSON.stringify(this.props.appo));
  let action = getAppoThunk(this.props.routeParams.id);
  this.props.dispatch(action);  // thunk middleware dispatch
} else {
  console.log('ARE THE SAME this.props.appo>>' + JSON.stringify(this.props.appo));
}

}

渲染：

   return(
     <form onSubmit={this.handleSubmit}>
      <label htmlFor="for_owner">Eingentümer (owner):</label>
      <input name="owner" defaultValue={this.props.appo.owner} />
    </form>
  );

为了降低复杂性，我删除了数组选项，并用一个简单的字符串替换它，同时，我还删除了所有其他的reducer，因此我的reducer现在只是：

  const initialState = {
      eigentumer:  'initial'  // owner 
   };

  const appo_rdcer = (state = initialState, action) => { 
     switch (action.type){
      case RECEIVE_ONE_APPO:
         return Object.assign({}, state, {
            eigentumer: action.eigentumer
          });

然后我注意到一些奇怪的事情：

return (
    <div id="responsive" className="modal hide fade" tabIndex="-1" >
      <Modal aria-labelledby='modal-label'
        style={modalStyle}
        backdropStyle={backdropStyle}
        show={this.state.showModal}
      >
      <Modal.Header>
         <Modal.Title>Modal Überschrift 1 --> {this.props.eigentumer}  </Modal.Title>
      </Modal.Header>
        <Modal.Body>
          <form onSubmit={this.handleSubmit}>
            <label htmlFor="for_owner">Eigentümer: 2 --> {this.props.eigentumer} </label>
            <input className="form-control" id="for_owner" name="owner" defaultValue={this.props.eigentumer} />
        </form>
      </Modal.Body>
      <Modal.Footer>
         <Button onClick={() => browserHistory.push('/appointments')}>Close</Button>
         <Button bsStyle="primary">Änderungen speichern</Button>
      </Modal.Footer>
    </Modal>
  </div>
  );

返回(
模态Überschrift 1-->{this.props.eigentumer}
伊格尼特·蒂默：2-->{this.props.eigentumer}
browserHistory.push（'/appoints'）}>Close
Änderungen speichen
);

结果:

因此，{this.props.eigentumer}在第1和第2处更新，但在第2处没有更新 defaultValue={this.props.eigentumer}，这就是视图未更新的原因。现在我需要知道为什么会这样

---

非常感谢你的帮助

如何更改ApparrayProp？如果您正在处理同一对象，并且只是删除或添加关键点，

nextrops

和

this.props

指向同一对象，它们将始终相等。是的，这不是直观的，但事情就是这样

假设您拥有对象apparrayProp：

appoArrayProp = {
  "foo": 1,
  "bar": 2
}

如果仅通过添加或删除属性来更改它，

nextrops.apporaryprop

和

this.props.apporaryprop

都将指向同一对象：

appoArrayProp = {
  "foo": 1,
  "bar": 2,
  "newProp": 3
}

和Object.keys（）.length比较将始终返回true。解决方案是创建一个新对象，复制当前AppArrayProp的属性，从新对象中添加或删除键，然后将其作为属性传递：

appoArrayProp = Object.assign({}, appoArrayProp)
/* Do changes to appoArrayProp and render component */

---

您如何更改ApparrayProp？如果您正在处理同一对象，并且只是删除或添加关键点，

nextrops

和

this.props

指向同一对象，它们将始终相等。是的，这不是直观的，但事情就是这样

假设您拥有对象apparrayProp：

appoArrayProp = {
  "foo": 1,
  "bar": 2
}

如果仅通过添加或删除属性来更改它，

nextrops.apporaryprop

和

this.props.apporaryprop

都将指向同一对象：

appoArrayProp = {
  "foo": 1,
  "bar": 2,
  "newProp": 3
}

和Object.keys（）.length比较将始终返回true。解决方案是创建一个新对象，复制当前AppArrayProp的属性，从新对象中添加或删除键，然后将其作为属性传递：

appoArrayProp = Object.assign({}, appoArrayProp)
/* Do changes to appoArrayProp and render component */

---

不直观，除非你根本没有阅读任何文档。它是redux的核心，不可变对象，您必须返回新对象。除了那个小牛肉，考虑到OP没有显示它们的减速器，很好的猜测是：pnextProps.apparrayprop和this.props.apparrayprop指向同一个对象。处理不变的原则很重要。减速器必须返回新的状态对象，而不是相同的修改状态。如果您想使用本机对象或作为Immutable.js的外部库（这一个非常有用，但它会生成非常复杂的对象，很难检查），则可以使用Object.assign来实现它@JuanMendes我们都至少犯过一次这样的错误：D@dannyjolie我希望最多只能凭直觉，除非你根本没有阅读任何文档。它是redux的核心，不可变对象，您必须返回新对象。除了那个小牛肉，考虑到OP没有显示它们的减速器，很好的猜测是：pnextProps.apparrayprop和this.props.apparrayprop指向同一个对象。处理不变的原则很重要。减速器必须返回新的状态对象，而不是相同的修改状态。如果您想使用本机对象或作为Immutable.js的外部库（这一个非常有用，但它会生成非常复杂的对象，很难检查），则可以使用Object.assign来实现它@JuanMendes我们都至少犯过一次这样的错误：D@dannyjolie我最希望你一想出来。关于defaultValue的注意事项，这是一种表示“在第一次渲染时填充此输入，但不要将其视为动态值”的方式。如果您改用

value

，那么您就很好了，但是您还需要一个

onChange

处理程序来告诉React当您在输入字段中写入时要做什么。答案被接受了吗？是的，我改为：我可以用一个方法处理所有的onChange：handleChange（名字，事件），很高兴你能弄明白。关于defaultValue的注意事项，这是一种表示“在第一次渲染时填充此输入，但不要将其视为动态值”的方式。如果您改用

value

，那么您就很好了，但是您还需要一个

onChange

处理程序来告诉React当您在输入字段中写入时要做什么。答案被接受了吗？是的，我改为：我可以用一个方法处理所有的onChange：handleChange（name，event）