javascript - React-redux state and props updated but component not rerendering -
i found problem cause me headache, working react dan redux crud ui.
everything work fine until found out "edit page" not work propperly, found out after map global state reducer local component props, component not updating or re-rendering @ all. here example of javascript :
index.js :
import react "react"; import reactdom "react-dom"; import {router, route, indexroute, hashhistory} "react-router"; import {provider} "react-redux"; import store "./store/store"; import department "./components/pages/department/index"; import departmentadd "./components/pages/department/add"; import departmentedit "./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} "redux"; import thunk "redux-thunk"; import {createlogger} "redux-logger"; import promise "redux-promise-middleware"; import {composewithdevtools} "redux-devtools-extension"; import persiststate 'redux-localstorage'; import combinereducer "./../reducers/combinereducer"; const middleware = composewithdevtools(applymiddleware(promise(), thunk, createlogger()), persiststate()); export default createstore(combinereducer, middleware); combinereducer.js
import {combinereducers} "redux"; import departmentreducer "./departmentreducer"; export default combinereducers({ departmentreducer }); departmentactions.js
import axios "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}) }) } } and edit.js
import react "react"; import contentheader "./../shared/contentheader"; import {connect} "react-redux"; import {hashhistory} "react-router"; import {getsingledepartment} "./../../../actions/departmentactions"; import erroralert "./../shared/erroralert"; import successalert "./../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> ); } } here when run in browser :
values inside text box previous state's values, though state updating, component won't rerender until refresh page.
so please can me? please kindly me..
regards,
vidy hermes
simply remove defaultvalue input components. defaultvalue turns them uncontrolled components.
https://facebook.github.io/react/docs/uncontrolled-components.html#default-values
if want update component 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} />
Comments
Post a Comment