React native 在屏幕之间传递数据，不刷新componentDidMount

我正在尝试从wordpress商业api加载类别。我可以将类别slug从导航器传递到类别页面。它呈现类别产品，但问题是需要导航到其他屏幕并返回相应的菜单以查看产品更改。我的代码是：

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Platform,
    StatusBar,
    Image,
    TouchableHighlight, ToolbarAndroid,
    FlatList,
    ScrollView

} from "react-native";
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { StackNavigator } from "react-navigation";
import {Icon, Button, Container, Header, Content,Left ,Right,Item,Input,Card,CardItem} from 'native-base'
import { Ionicons,FontAwesome } from '@expo/vector-icons'

import FAIcon from 'react-native-vector-icons/FontAwesome'
import Swiper from 'react-native-swiper'
//import * as ProductAction from '../actions/ProductActions';



class Category extends Component {

    state={ 
        data:[],
    }

    fetchData = async() => {

        //response
        const namess = this.props.navigation.state.params.category; //This is product slug from navigator screen
        const response = await
        //Fetching cat using V1


        fetch("https://example.com/wp-json/wc/v1/products?filter[product_cat]="+ namess +"&consumer_key=ck&consumer_secret=cs");
        //posts
        const posts = await response.json();
        this.setState({data:posts});
    }
    componentDidMount(){
        //page load
        this.fetchData();
        //this.props.ProductAction.getProducts();
    }
    static navigationOptions ={
        drawerIcon:(
                <FontAwesome name="home" size={30} color="black" />
            )
    }
    render() {
        const { navigate } = this.props.navigation;
        const namess = this.props.navigation.state.params.category; //This is product slug from navigator screen

        return (

            <Container>

            <ScrollView style={{backgroundColor:'#eeeeee'}}>
            <Card>
            <CardItem header style={{flex:1,height:50}}>
                <Text style={{paddingLeft:140,fontSize:18}}>
                    BLOUSE{namess}
                </Text>
            </CardItem>
            </Card>
            <View>
                    <FlatList contentContainerStyle={styles.list} numColumns={2} 
            data={this.state.data || []}
            keyExtractor = {(x,i) =>i.toString()}
            renderItem = {({item})=>
                <TouchableHighlight style={{width:'50%'}} onPress={() => navigate("Products", { product: item })} underlayColor="white">
                <View style={styles.view} >
          <Image style={styles.image} source={{uri: item.images[0].src}} />
          <Text style={styles.text}>{item.name}</Text>
          <View style={styles.borderNow}></View>
          <View style={styles.cartPrice}>
              <Text style={styles.addCart}>₹{item.price}</Text>
              <Text style={styles.price}>

              </Text> 
              </View>
        </View>
                      </TouchableHighlight> 
            } />
            </View> 
                </ScrollView>
            </Container>

        )
    }
}
export default Category;

import React，{Component}来自“React”；
进口{
看法
文本，
样式表，
可触摸不透明度，
平台，
状态栏，
形象,，
触摸式高光、工具栏、Android、，
平面列表，
卷轴视图
}从“反应本族语”；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“react navigation”导入{StackNavigator}；
从“本机基础”导入{图标、按钮、容器、标题、内容、左、右、项目、输入、卡片、卡片}
从“@expo/vector icons”导入{Ionicons，FontAwesome}
从“react native vector icons/Fontsome”导入FAIcon
从“react native Swiper”导入Swiper
//将*作为ProductAction从“../actions/ProductActions”导入；
类类别扩展组件{
状态={
数据：[]，
}
fetchData=async（）=>{
//回应
const names=this.props.navigation.state.params.category；//这是navigator屏幕上的产品slug
常数响应=等待
//使用V1获取cat
取回（“https://example.com/wp-json/wc/v1/products?filter[product_cat]=“+names+”&consumer_key=ck&consumer_secret=cs”）；
//职位
const posts=wait response.json（）；
this.setState（{data:posts}）；
}
componentDidMount（）{
//页面加载
这是fetchData（）；
//this.props.ProductAction.getProducts（）；
}
静态导航选项={
付款人：(
)
}
render（）{
const{navigate}=this.props.navigation；
const names=this.props.navigation.state.params.category；//这是navigator屏幕上的产品slug
返回(
衬衫{names}
i、 toString（）}
renderItem={（{item}）=>
导航（“产品”，{product:item}}underlayColor=“白色”>
{item.name}
₹{item.price}
} />
)
}
}
导出默认类别；

const names

是我从另一个屏幕上获得的参数，我可以在按下菜单时进行渲染。但是

fetch（url）

中的变量名称不是刷新的，而是工作的。我需要呈现此当前url。

componentDidMount（）

当您第一次看到您的类别页面时将被激发，当导航到另一个屏幕时，类别页面未卸载，因此再次访问时不会调用

componentDidMount（）

---

为了从第二个屏幕获取数据，您可以在类别页面处于焦点时创建一个侦听器，如下所示：

componentDidMount() {
   this.props.navigation.addListener("willFocus", this.fetchData);
}