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

减速器：

...
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很陌生，应该将动作分派到其他地方吗？

Answer 1

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

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

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

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

React Native组件未使用componentWillMount或componentDidMount中的异步redux操作呈现

1 个答案: