将道具绑定到状态ReactJS

Question

我在互联网上读到，执行以下操作是不好的编码习惯：

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      someItem = props.someItem
    };
  }
}

但是，如果我有这种情况：

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      someItem = this.props.someItem
    };
  }
}

Test.propTypes = {
  someItem: PropTypes.array
};

function mapStateToProps(state, ownProps) {
  [...]
  return {
    someItem: someItem
  };
}

export default withRouter(connect(mapStateToProps)(Test));

会有问题吗？ 找不到网上没有说我做不到的任何地方。

我试图确保每次导航回该组件时，该组件都能从Redux Store获取数据。 我尝试使用componentWillReceiveProps（），但到目前为止，它仅运行一次，而且componentDidMount和componentWillMount不接受setState。

干杯。

Answer 1

除非并且直到要在以后的某个时间点在本地修改道具，并在对道具提供者执行某些操作后对其进行更新，否则您不应该将道具保存在状态中。 简而言之，您的状态一定不能在代码的所有时间点都直接从props派生。

即使您使用redux mapStateToProps为组件提供道具，它仍然与来自父组件的道具相同

class Test extends React.Component {
  render() {
      console.log(this.props.someItem);
  }
}

Test.propTypes = {
  someItem: PropTypes.array
};

function mapStateToProps(state, ownProps) {
  [...]
  return {
    someItem: someItem
  };
}

export default withRouter(connect(mapStateToProps)(Test));