React native React Native组件按钮上的分派操作

我在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 && (
          <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);

---

我现在开始工作了，这可能会帮助其他人，以防他们遇到与我相同的问题。工作代码如下：

//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 && (
          <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));

//其他导入
从'src/modules/cart/actions'导入{clearCart}；
从'react redux'导入{connect}；
//其他进口。。
类WebviewPayment扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
const{route}=props；
此.state={
加载：对，
uri:路由？.params？.uri？？？“”，
};
}
handleContinue=（）=>{
const{navigation}=this.props；
this.props.clearCart（）；
navigation.pop（）；
导航。导航（homeTabs.shop）；
};
//这里的其他组件
render（）{
const{loading，uri}=this.state；
const{t}=this.props；
返回(
this.handleResponse（数据）}
style={style.webView}
onLoadStart={（）=>this.setState（{loading:false}）}
/>
{加载&&(
)}
);
}
}
const styles=StyleSheet.create({
网络视图：{
弹性：1，
背景色：“透明”，
},
视图加载：{
位置：'绝对'，
排名：0，
左:0,，
右:0,，
底部：0，
为内容辩护：“中心”，
},
页脚：{
边际：边际，大，
},
});
WebviewPayment.propTypes={}；
const mapDispatchToProps=（调度）=>({
clearCart:（）=>分派（clearCart（）），
});
导出默认连接(
无效的
mapDispatchToProps，
)（withTranslation（）（WebviewPayment））；

---

我使用react-reduxconnect然后mapDispatchToProps将clearCart（）传递到道具中。

您需要使用react-redux connect。你能显示错误信息吗？这是我得到的错误。

//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 && (
          <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));