javascript - React-redux 状态和 Prop 已更新但组件未重新渲染

Question

我发现了一个真正让我头疼的问题，我目前正在为 CRUD UI 使用 React 和 Redux。

一切正常，直到我发现我的“编辑页面”无法正常工作，我发现在我将我的全局状态从 reducer 映射到本地组件 Prop 后，显然该组件根本没有更新或重新渲染.这是我的 javascript 示例:

索引.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;
}

商店.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>
        );
    }
}

这是我在浏览器中运行它时的样子:

文本框中的值是先前状态的值，虽然状态正在更新，但组件不会重新呈现，直到我刷新页面。

请问有人能帮帮我吗？请帮助我..

问候，

维迪爱马仕

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}
/>