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

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

即使您使用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));

将道具绑定到状态ReactJS

1 个答案: