React-redux状態と小道具が更新されましたが、コンポーネントは再レンダリングされません

Question

私は頭痛を実際に引き起こす問題を発見しました。私は現在、CRUD UIに対してreact dan reduxを使っています。私は私の「編集ページ」propperly動作しませんを発見するまで

すべてが正常に動作し、私は地元のコンポーネント小道具に減速から私のグローバル状態をマッピングした後、明らかにコンポーネントの更新がないか、またはで再レンダリングすることが判明しましたすべて。ここに私のjavascriptの例である：

index.js：

import React from "react"; 
import ReactDOM from "react-dom"; 
import {Router, Route, IndexRoute, hashHistory} from "react-router"; 
import {Provider} from "react-redux"; 
import store from "./store/store"; 

import Department from "./components/pages/department/index"; 
import DepartmentAdd from "./components/pages/department/add"; 
import DepartmentEdit from "./components/pages/department/edit"; 

const app = document.getElementById("app"); 
ReactDOM.render(
    <Provider store={store}> 
     <Router history={hashHistory}> 

      <Route path="/" component={Layout} onEnter={requireLogin}> 
       <IndexRoute component={Dashboard} onEnter={requireLogin}/> 
       <Route path="error404" component={ERROR404}/> 

       <Route path="department" onEnter={requireLogin}> 
        <IndexRoute component={Department}/> 
        <Route path="add" component={DepartmentAdd}/> 
        <Route path="edit/:id" component={DepartmentEdit}/> 
       </Route> 
      </Route> 
     </Router> 
    </Provider> 
    , app); 

departmentReducer.js

export default function (state = { 
    message: null, 
    activeRow: {}, 
    error: false 

}, action) { 

    switch (action.type) { 

     case "GET_SINGLE_DEPARTMENT": { 
      state = { 
       ...state, 
       activeRow: {...action.payload.data}, 
       message: action.payload.success.message, 
       error: false 
      }; 
      break; 
     } 

     case "GET_SINGLE_DEPARTMENT_FAILED": { 
      state = {...state, message: action.payload.error.message, error: true}; 
      break; 
     } 
     default: { 
      state = {...state}; 
      break; 
     } 

    } 
    return state; 
} 

store.js

import {createStore, applyMiddleware} from "redux"; 
import thunk from "redux-thunk"; 
import {createLogger} from "redux-logger"; 
import promise from "redux-promise-middleware"; 
import {composeWithDevTools} from "redux-devtools-extension"; 
import persistState from 'redux-localstorage'; 

import combineReducer from "./../reducers/combineReducer"; 

const middleware = composeWithDevTools(applyMiddleware(promise(), thunk, createLogger()), persistState()); 

export default createStore(combineReducer, middleware); 

combineReducer.js

import {combineReducers} from "redux"; 
import departmentReducer from "./departmentReducer"; 

export default combineReducers({ 
    departmentReducer 
}); 

departmentActions.js

import axios from "axios"; 

export function getSingleDepartment(id = 0) { 
    return function (dispatch) { 
     axios.get('department/show/' + id).then((response) => { 
      dispatch({type: "GET_SINGLE_DEPARTMENT", payload: response.data}) 
     }).catch((error) => { 
      dispatch({type: "GET_SINGLE_DEPARTMENT_FAILED", payload: error.response.data}) 
     }) 
    } 
} 

し、最終的に

import React from "react"; 
import ContentHeader from "./../shared/ContentHeader"; 
import {connect} from "react-redux"; 
import {hashHistory} from "react-router"; 
import {getSingleDepartment} from "./../../../actions/departmentActions"; 
import ErrorAlert from "./../shared/ErrorAlert"; 
import SuccessAlert from "./../shared/SuccessAlert"; 

@connect((store) => { 
    return { 
     activeRow: store.departmentReducer.activeRow, 
     error: store.departmentReducer.error, 
     message: store.departmentReducer.error, 
    } 
}) 

export default class index extends React.Component { 

    constructor() { 
     super(); 
     this.state 
    } 

    componentDidMount() { 
     this.props.dispatch(getSingleDepartment(this.props.params.id)); 
    } 

    render() { 
     const {namaDepartment, deskripsiDepartment} = this.props.activeRow; 
     return (
      <section> 
       <ContentHeader title="Edit Department"/> 
       <div class="body"> 
        <div class="bodyWrapper col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
         <ErrorAlert error={this.props.error} message={this.props.message}/> 
         <SuccessAlert error={this.props.error} message={this.props.message}/> 
         <form onSubmit={this.saveProfile.bind(this)}> 
          <div className="half col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
           <div className="feWrapper"> 
            <label for="nama">Nama Department</label> 
            <input defaultValue={namaDepartment} 
              type="text" 
              ref="nama" 
              id="nama" 
              name="nama" 
              className="form-control"/> 
           </div> 
           <div className="feWrapper"> 
            <label for="nama">Deskripsi Department</label> 
            <textarea defaultValue={deskripsiDepartment} 
              type="text" 
              ref="deskripsi" 
              id="deskripsi" 
              name="deskripsi" 
              className="form-control"/> 
           </div> 
           <div className="feWrapper"> 
            <ul className="myBtnGroup"> 
             <li> 
              <input onClick={this.onReturnToMain.bind(this)} type="button" 
                value="kembali" 
                className="btn btn-info"/> 
             </li> 
             <li> 
              <input onClick={this.cancelSave.bind(this)} type="button" value="batal" 
                className="btn btn-primary"/> 
             </li> 
             <li> 
              <input type="submit" value="ubah" className="btn btn-info"/> 
             </li> 
            </ul> 
           </div> 
          </div> 
          <div className="clearfix"></div> 
         </form> 
        </div> 
        <div class="clearBoth"></div> 
       </div> 
      </section> 
     ); 
    } 
} 

ここ

私は、ブラウザでそれを実行したときのように見えるは何かということですedit.js：テキスト内部

値状態は更新されていますが、以前の状態の値ですが、コンポーネントは更新されるまで再レンダリングされません私はページをリフレッシュします。

だから誰でも助けてくれますか？親切に私は、このような場合はわからないが、私はそれがコメントのためにあまりにも長いです（関連する可能性がある2つの物事を見る、もしそうなら...

に関して、

Vidyエルメス

Answer 1

入力コンポーネントからdefaultValueを削除するだけです。 defaultValueは、それらを制御されていないコンポーネントに変えます。

https://facebook.github.io/react/docs/uncontrolled-components.html#default-values

あなたは部品の値を更新する場合：

<input 
    type="text" 
    ref="nama" 
    id="nama" 
    name="nama" 
    className="form-control" 
    value={namaDepartment} 
/> 

<textarea 
    type="text" 
    ref="deskripsi" 
    id="deskripsi" 
    name="deskripsi" 
    className="form-control" 
    value={deskripsiDepartment} 
/> 

Answer 2

私を助けてくださいそれは）私はこの回答を削除/編集するソリューションではありません：あなたの減速内側、代わりに状態オブジェクトは、単に各caseブロックに新しいオブジェクトを返すようにしてみてください変異の
：

export default function (state = { 
    message: null, 
    activeRow: {}, 
    error: false 

}, action) { 

    switch (action.type) { 

     case "GET_SINGLE_DEPARTMENT": { 
      return { 
       ...state, 
       activeRow: {...action.payload.data}, 
       message: action.payload.success.message, 
       error: false 
      }; 
     } 

     case "GET_SINGLE_DEPARTMENT_FAILED": { 
      return {...state, message: action.payload.error.message, error: true}; 
     } 
     default: 
      return state;  
    } 
} 

もう一つは、THER eはこのコード行を書く必要はありませんconstructor：
this.state私はほとんどあなたの問題には関係ありませんが、これはstateを入力していないとそこにはないはずです。