如何将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 的好方法。 现在由你来适应看起来最好的东西，干杯:)