如何將redux props分配給react js中的組件本地狀態？

Question

因為我最近在 React.js 工作，我對如何將 redux props 分配給組件本地狀態以用於編輯數據有疑問。我曾嘗試將 redux props 分配給 state 並且它是 undefined can有人能幫我解決這個問題嗎？

  constructor(props) {
  super(props);
  this.state = {
  editMode: false,
  originalAudit: this.props.Furlenco.furlencoAudits,
  **editedAudit: this.props.Furlenco.furlencoAudits**,
  selectedAudit: null,

};
  changeAnswer = (question, answerObject) => {
  let answer = "";
  let audit = this.state.editedAudit;
  console.log(audit)

}

此處審核未定義。如何解決此問題

Answer 1

您提供的代碼似乎都沒有使用 Redux。 如果audit返回未定義，我會仔細檢查您傳遞給有狀態組件的道具。

Answer 2

除了確保您實際上正確地傳遞了 redux 道具。 我會嘗試將此行添加到構造函數中：

  this.changeAnswer = this.changeAnswer.bind(this)

---

      constructor(props) {
        super(props);
        this.state = {
          editMode: false,
          originalAudit: this.props.Furlenco.furlencoAudits,
          **editedAudit: this.props.Furlenco.furlencoAudits**,
          selectedAudit: null,
        };
        console.log(this.props); // make sure its populated with data

        this.changeAnswer = this.changeAnswer.bind(this)
}

Answer 3

好吧，我認為代碼不言自明

import React from 'react';
import _ from 'lodash';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as AuthActions from '../../core/redux/Auth/actions.js';
import * as AuthSelector from '../../core/redux/Auth/selector.js';

class WrappedLogin extends React.Component {
    static propTypes = {
        isPending: PropTypes.bool.isRequired,
        postAuth: PropTypes.func.isRequired,
        error: PropTypes.object,
        isAuth: PropTypes.bool.isRequired,
    };

    static defaultProps = {
        error: null,
    };

    constructor(props) {
        super(props);
        this.state = {
            error: props.error,
            isPending: props.isPending,
            isAuth: props.isAuth,
        };
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit() {
        const { postAuth } = this.props;

        postAuth(userName, password);
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        const keys = [
            'isPending',
            'error',
            'isAuth',
        ];

        const mutableProps = _.pick(nextProps, keys);
        const stateToCompare = _.pick(prevState, keys);

        if (!_.isEqual(mutableProps, stateToCompare)) {
            return mutableProps;
        }

        return null;
    }

    render () {
        const { isPending } = this.state;

        return (
            <Spin spinning={ isPending } delay={ 500 }>
                <LayoutLogin>
                    <CustomForm ...this.state>
                </LayoutLogin>
            </Spin>
        );
    }
}

function mapStateToProps(state) {
    return {
        isPending: AuthSelector.getIsPending(state),
        error: AuthSelector.getError(state),
        isAuth: AuthSelector.getIsAuth(state),
    };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ ...AuthActions }, dispatch);
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(WrappedLogin));

嗯，這是使用 redux、redux 操作/reducers 的登錄頁面的簡單摘錄。 首先我們聲明我們的 props（它們的類型，即使我們在 javascript 中它仍然是一個很好的實踐），我們添加一個默認值，這里是錯誤變量（是 null 或來自你的 API 的錯誤對象或其他）。

其次，我們在WrappedLogin類的本地狀態中添加我們的道具。 永遠不要忘記綁定我們類的所有方法。（規則很簡單，如果方法改變了組件的本地狀態，你必須綁定它）。

三、重要部分： static getDerivedStateFromProps(nextProps, prevState)有關更多信息， 請訪問。

基本上， It should return an object to update the state, or null to update nothing. 就在渲染方法之前。 我們定義了我們想要更新的變量。 想想lodash和很棒的方法pick和isEqual什么時候可以比較newProps和previousState，如果有更新那么方法返回新的props並且下一次渲染會有新的數據。

在它只是一個簡單的渲染之后，你可以對變量做任何你想做的事情。 這里只是一個例子。 最后是將 redux 存儲（ 此處為 doc ）（動作、狀態等）與我們的組件連接的 redux 方法。

我認為這是一種以簡單有效的方式使用 reactjs、redux、props 的好方法。 現在由你來適應看起來最好的東西，干杯:)