javascript - React Native 组件未使用 componentWillMount 或 componentDidMount 中的异步 redux 操作进行渲染

Question

我有一个使用 CRNA 创建的 React Native 应用程序。当在 componentDidMount 或 componentWillMount 中调用 API 获取更新速率时，组件不再呈现。我正在使用react-native-router-flux进行路由。这些操作是为了与 redux-axios-middleware 一起使用而构建的。

组件:

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

  this.onSubmit = this.onSubmit.bind(this);
}

componentDidMount() {
  this.props.getCountries();
}

onSubmit(data) {
  this.setState({error: error}); //clear out error messages

  this.props.createUser(data)
}

render() {
  return (
    <View style={styles.container}>
      <PageHeader
        title={'Create User'}
        subtitle={'Create a user under your default affiliate link.'}
        backButton />
      <Form fields={fields}
        showLabel={false}
        onSubmit={this.onSubmit}
        buttonTitle={"Create User"}
        error={this.state.error}/>
    </View>
  );
}

export default connect(null, { createUser, getCountries })(CreateUser);

reducer :

...
case t.GET_COUNTRIES:
  return state;
case t.GET_COUNTRIES_SUCCESS:
  console.log(action.payload);
  return { ...state, countries: action.payload.data };
case t.GET_COUNTRIES_FAIL:
  return { ...state, error: 'Error Getting Countries' };
...

行动:

...
export function getCountries() {
  return {
    type: t.GET_COUNTRIES,
      payload: {
        request: {
        url: 'data/countries',
      },
    },
  };
};
...

当组件被路由到时，操作将运行并将有效负载记录到控制台，但随后组件不会呈现。我对 React 还很陌生，是否应该将操作分派(dispatch)到其他地方？

Answer 1

它们不会渲染，因为您没有在任何地方渲染它们。您所做的就是添加 this.props.getCountries();在 componentdidmount 中调用它，但 View 中没有任何内容。

您需要在组件中执行类似的操作。

function mapStateToProps(state) {
return { countries: state.theReducerName.countries} }
export default connect(mapStateToProps, { createUser, getCountries })(CreateUser);

然后在渲染中您可以使用 <Text>this.props.countries</Text>