1

解決済み: フィールド フォームのdefaultValueは、私が思っていたものではありません。

自分が何をしているのかわかりません [化学犬の写真はこちら]。

私のコンポーネントはloadFormと呼ばれ、サンク アクションを介して 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>
  );

this.props.appoは実際に更新されますが、ビューは変わりません:

ここに画像の説明を入力

アップデート

私の減速機が最初からあったので、あなたの助けに感謝します：

    case RECEIVE_ONE_APPO
        Object.assign({}, state, {
         appArrayPop: action.appArrayPop
      });

複雑さを軽減するために、配列オプションを削除して単純な文字列に置き換えました。また、他のすべてのレデューサーを削除したため、レデューサーは次のようになりました。

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

結果：

ここに画像の説明を入力

したがって、{this.props.eigentumer}は場所 1 と 2 で更新されますが、 defaultValue={this.props.eigentumer}では更新されないため、ビューは更新されません。なぜこれが起こっているのかを知るために、これを読む必要があります。

どうもありがとうございました。

4

1 に答える 1

5

どのように変わりappoArrayPropますか？同じオブジェクトで作業していて、キーを削除または追加しただけで、同じnextPropsオブジェクトthis.propsを指している場合、これらは常に等しくなります。はい、直感的ではありませんが、そのようになります。

オブジェクトがあるとしましょうappoArrayProp:

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

nextProps.appoArrayPropプロパティを追加または削除するだけで変更し、this.props.appoArrayProp両方が同じオブジェクトを指す場合:

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

Object.keys().length 比較は常に true を返します。解決策は、新しいオブジェクトを作成し、現在の appoArrayProp のプロパティをコピーし、新しいオブジェクトからキーを追加または削除してから、それをプロパティとして渡すことです。

appoArrayProp = Object.assign({}, appoArrayProp)
/* Do changes to appoArrayProp and render component */
于 2016-03-17T20:25:01.080 に答える