Блог

Я относительно новичок в React Native, и я пытался прочитать много руководств повсюду, но все же я не получаю правильного решения по своей проблеме. Каков правильный способ вызова действия clearCart() и в то же время навигации? У меня возникает эта ошибка, связанная с отправкой при нажатии кнопки.

Кажется, я использую componentDidMount() или useEffect() и отдельно вызываю clearCart(), но я с радостью приветствовал бы любые предложения, поскольку это будет дополнительным для меня.

 //other imports
import {clearCart} from 'src/modules/cart/actions';
//other imports..

class WebviewPayment extends Component {
  constructor(props, context) {
    super(props, context);
    const {route} = props;
    this.state = {
      loading: true,
      uri: route?.params?.uri ?? '',
    };
  }
  
  handleContinue = () => {
    const {navigation, dispatch} = this.props;
    dispatch(clearCart());
    navigation.pop();
    navigation.navigate(homeTabs.shop);
  };

  //other components here

  render() {
    const {loading, uri} = this.state;
    const {t} = this.props;
    return (
      <ThemedView isFullView>
        <WebView
          source={{uri}}
          onNavigationStateChange={data => this.handleResponse(data)}
          style={styles.webView}
          onLoadStart={() => this.setState({loading: false})}
        />
        {loading amp;amp; (
          <View style={styles.viewLoading}>
            <ActivityIndicator size="large" color="black"/>
          </View>
        )}
        <Container style={styles.footer}>
          <Button
            title={t('cart:text_shopping')}
            onPress={this.handleContinue}
          />
        </Container>
      </ThemedView>
    );
  }
}

const styles = StyleSheet.create({
  webView: {
    flex: 1,
    backgroundColor: 'transparent',
  },
  viewLoading: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
  },
  footer: {
    marginVertical: margin.big,
  },
});

WebviewPayment.propTypes = {};

export default withTranslation()(WebviewPayment);
  

В моем actions.js , У меня есть:

 export function clearCart() {
  return {
    type: Actions.CLEAR_CART,
  };
}
  

Сейчас у меня это работает, и это может помочь другим, если они столкнутся с той же проблемой, что и у меня. Рабочий код выглядит следующим образом:

 //other imports
import {clearCart} from 'src/modules/cart/actions';
import {connect} from 'react-redux';
//other imports..

class WebviewPayment extends Component {
  constructor(props, context) {
    super(props, context);
    const {route} = props;
    this.state = {
      loading: true,
      uri: route?.params?.uri ?? '',
    };
  }
  
  handleContinue = () => {
    const {navigation} = this.props;
    this.props.clearCart();
    navigation.pop();
    navigation.navigate(homeTabs.shop);
  };

  //other components here

  render() {
    const {loading, uri} = this.state;
    const {t} = this.props;
    return (
      <ThemedView isFullView>
        <WebView
          source={{uri}}
          onNavigationStateChange={data => this.handleResponse(data)}
          style={styles.webView}
          onLoadStart={() => this.setState({loading: false})}
        />
        {loading amp;amp; (
          <View style={styles.viewLoading}>
            <ActivityIndicator size="large" color="black"/>
          </View>
        )}
        <Container style={styles.footer}>
          <Button
            title={t('cart:text_shopping')}
            onPress={this.handleContinue}
          />
        </Container>
      </ThemedView>
    );
  }
}

const styles = StyleSheet.create({
  webView: {
    flex: 1,
    backgroundColor: 'transparent',
  },
  viewLoading: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
  },
  footer: {
    marginVertical: margin.big,
  },
});

WebviewPayment.propTypes = {};

const mapDispatchToProps = (dispatch) => ({
  clearCart: () => dispatch(clearCart()),
});

export default connect(
  null,
  mapDispatchToProps,
)(withTranslation()(WebviewPayment));
  

Я использовал react-redux connect, а затем mapDispatchToProps для передачи clearCart() в props.