Question

当前我正在使用以下内容：

const mapStateToProps = state => {
  return {
    stateInProps: state.someSliceIWant
  };
};

Foo.propTypes = {
  dispatch: PropTypes.func,
  stateInProps: PropTypes.object
};

export default connect(mapStateToProps)(Foo);

并且由于我们实际上只能将状态映射到道具，而不能直接将状态映射到组件中的状态，因此我通过以下方式以一种怪诞的方式解决了这个问题：

class Foo extends React.Component {

  constructor(props){
    super(props);

    this.state = {};

    setTimeout(() => {this.setState(this.props.stateInProps);},1);

  }

我应该如何正确执行此操作？我尝试过使用不同的生命周期挂钩和各种方法。

我发现一个有趣的事情是，如果我将setState（）放在mapStateToProps中。...它几乎可以工作。

const mapStateToProps = state => {
  Foo.setState(state.someSliceIWant);
  return {
    stateInProps: state.someSliceIWant
  };
};

它引发了很多错误，但是当我删除该行并通过webpack进行搜索并且页面重新呈现时，状态实际上已经正确更新，并且值在那里！什么？！我无法弄清楚如何做到这一点，而又不会抛出错误，因为Redux / React本身不允许这样做。

Answer 1

在将状态映射到Props之后，您是否尝试过ComponentWillReceiveProps？

例如：

componentWillReceiveProps(nextProps) {
    if (nextProps.errors) {
      this.setState({
        errors: nextProps.errors
      });
    }
  }

Answer 2

您使用的黑客方式，如果您的stateInProps在以后的生命周期中得到更新，则可能无法访问。

您可以使用以下内容

class Foo extends React.Component {

  state = {};

  componentWillMount() { this.setStateInProps(this.props); }

  componentWillReceiveProps(nextProps) { this.setStateInProps(nextProps)}

  setStateInProps= (props) => this.setState(props.stateInProps)

}

如何将Redux状态切片映射到本地组件状态？

2 个答案: