将 Props 绑定到状态 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()，但到目前为止它只运行一次并且 c​​omponentDidMount 和 componentWillMount 不接受 setState。

干杯。

Answer 1

您不应该将 props 保存在 state 中，除非您想稍后在本地修改它，并在对 props 提供者采取一些行动后对其进行更新。简而言之，您声明在代码中的所有时间点都不能直接从 props 派生。

即使你使用 redux mapStateToProps 为组件提供 props，它仍然与来自父组件相同

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));