Question

我有一个登录组件，我希望用户从其中选择服务目录中的服务。选择器获取并将值设置为redux：

<Picker
  selectedValue={this.props.service.id}
  onValueChange={itemValue => this.props.setServiceType(itemValue)}>
  {service_catalogue.map(service =>
      <Picker.Item key={service.id} label={service.id} value={service.id} />
  )}
</Picker>

但是我不知道如何正确设置初始值。我在componentDidMount（目录的第一项）中设置了默认值，但是我认为componentDidMount在更新时被触发了吗？是否存在仅在React Native中渲染组件时触发的生命周期功能？

componentDidMount() {
  this.props.setServiceType(service_catalogue[0].id)
}

所以我面临的问题是，即使用户可能选择“ Instructor”，该服务也会变成service_catalogue [0] =“ Cleaner”。而且，如果我未在componentDidMount上设置ServiceType，则不会显示Picker，因为this.props.service.id不存在。

Answer 1

您可以通过以下方式设置道具的默认值：

...
YourComponent.propTypes = {
  myState: PropTypes.string,
}

YourComponent.defaultProps = {
  myState: 'default value',
};

const mapStateToProps = state = ({
  myState: state.myState,
});

export default connect(mapStateToProps)(YourComponent);

更多信息：https://reactjs.org/docs/typechecking-with-proptypes.html#default-prop-values

渲染组件时如何启动道具？

1 个答案: