1
我发现了一个真正令我头痛的问题，我目前正在使用CRUD UI进行反应。React-redux状态和道具已更新，但组件不在重新渲染
一切工作正常，直到我发现我的“编辑页面”无法正常工作，我发现后，我从减速机映射到本地组件的道具，显然该组件不更新或重新呈现在所有。这里是我的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})
})
}
}
最后edit.js
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>
);
}
}
这里是什么，是看当我在浏览器中运行，如：内文
值框是先前状态的值，虽然状态正在更新，但组件不会重新渲染直到我刷新页面。
所以请任何人都可以帮我吗？请您帮助我..
问候，
Vidy爱马仕
能否请您发送一些示例代码？仅仅通过查看屏幕截图有点难以帮助你:)另外，尝试在组件中声明“console.log”。 – mersocarlin
发布应产生新状态的减速器代码 – Karim
另外，让我们知道您是使用Component还是PureComponent。如果仅更改了子值，PureComponents浅层比较将无法检测对象上的支柱更改。 –