React native 反应本机导航刷新组件问题

我在分类页面，当我按下其中任何一个时，它会将我导航到该分类产品列表。到现在为止，一直都还不错。当我返回并按下另一个类别时，我会得到以前的类别产品列表

这是我的一些代码

这是我导航到产品列表的方式

render() {
    const {navigation} = this.props.navigation;
    const categories = category.map((item, index) => {
      return (
        <TouchableOpacity
          key={index}
          styles={styles.category}
          onPress={() =>
            navigation.navigate('ProductList', {
              categoryName: item.Menu,
            })
          }>
          <Text> {item.Menu} </Text>
        </TouchableOpacity>
      );
    });

    return (
      <View style={styles.container}>
        {this.state.isData ? (
          <View style={styles.container}>
            <Text style={styles.title}>Category</Text>
            {categories}
          </View>
        ) : (
          <ActivityIndicator size="large" color="#0B970B" />
        )}
      </View>
    );
  }
}

render（）{
const{navigation}=this.props.navigation；
const categories=category.map（（项目、索引）=>{
返回(
navigation.navigate（'ProductList'{
categoryName:item.Menu，
})
}>
{item.Menu}
);
});
返回(
{this.state.isData(
类别
{类别}
) : (
)}
);
}
}

这就是我要去的地方，我可以在外线找到导航道具，但我找不到问题所在

import React,{useState,useEffect} from 'react';
import {
  View,
  ScrollView,
  Text,
  Image,
  StyleSheet,
  Dimensions,
  ActivityIndicator,
} from 'react-native';

const List = ({navigation}) => {
  const [isData, setIsData] = useState(false);
  useEffect(() => {
    getData();
    return null;
  }, []);

  const getData = async () => {
    if (navigation?.route?.params?.categoryName) {
      categoryName = navigation.route.params.categoryName;
      fetch(global.apiPost + global.token, requestOptions)
        .then((response) => response.json())
        .then((result) => {
          result.forEach((element) => {
            if (element.Menu === categoryName) {
              products.push(element);
            }
          });
          setIsData(true);
          console.log(products, 'products');
          console.log(productsByAccessory, 'productsByAccessory');
          console.log(productsByTravel, 'productsByTravel');
          console.log(productsByBag, 'productsByBag');
        })
        .catch((error) => console.log('error', error));
    }
  };

  return (
    <View style={{flex: 1}}>
      <Text style={styles.title}>{categoryName}</Text>
      {isData ? (
        <View style={{flex: 1}}>
          <View style={styles.itemFounds}>
            <Text>{data.length + ' item founds'}</Text>
          </View>
          <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
            <Text>
              {productsByAccessory.length} / {productsByTravel.length} /{' '}
              {productsByBag.length} / {products.length} asd
            </Text>
          </View>
        </View>
      ) : (
        <ActivityIndicator size="large" color="#0B970B" />
      )}
    </View>
  );
}

export default List

import React，{useState，useffect}来自“React”；
进口{
看法
滚动视图，
文本，
形象,，
样式表，
尺寸，
活动指示器，
}从“反应本机”；
常量列表=（{navigation}）=>{
常量[isData，setIsData]=useState（false）；
useffect（（）=>{
getData（）；
返回null；
}, []);
const getData=async（）=>{
if（导航？.route？.params？.categoryName）{
categoryName=navigation.route.params.categoryName；
获取（global.apiPost+global.token，requestOptions）
.then（（response）=>response.json（））
。然后（（结果）=>{
result.forEach（（元素）=>{
if（element.Menu==categoryName）{
产品.推（元件）；
}
});
setIsData（真）；
控制台日志（产品，“产品”）；
log（productsByAccessory，'productsByAccessory'）；
log（productsByTravel，'productsByTravel'）；
log（productsByBag，'productsByBag'）；
})
.catch（（错误）=>console.log（'error'，error））；
}
};
返回(
{categoryName}
{isData(
{data.length+'item founds'}
{productsByAccessory.length}/{productsByTravel.length}/{''}
{productsByBag.length}/{products.length}asd
) : (
)}
);
}
导出默认列表

更改

渲染方法

const { navigation } = this.props; // Here was the error
const categories = category.map((item, index) => {
  return (
    <TouchableOpacity
      key={index}
      styles={styles.category}
      onPress={() =>
        navigation.navigate("ProductList", {
          categoryName: item.Menu,
        })
      }
    >
      <Text> {item.Menu} </Text>
    </TouchableOpacity>
  );
});

render() {
    return (
      <View style={styles.container}>
        {this.state.isData ? (
          <View style={styles.container}>
            <Text style={styles.title}>Category</Text>
            {categories}
          </View>
        ) : (
          <ActivityIndicator size="large" color="#0B970B" />
        )}
      </View>
    );
  }
}

const{navigation}=this.props；//这里是错误
const categories=category.map（（项目、索引）=>{
返回(
导航（“产品列表”{
categoryName:item.Menu，
})
}
>
{item.Menu}
);
});
render（）{
返回(
{this.state.isData(
类别
{类别}
) : (
)}
);
}
}

render
方法应该只有
return
语句。不要在
render
方法中执行任何操作。现在它应该可以工作了。
我不知道为什么，但我无法通过任何其他方式获得导航道具，它基于类的组件。我更改了功能组件，但这也不起作用
组件
没有
导航
道具。只有
屏幕
有
导航
道具。是的，这是一个屏幕对不起，我已经编辑了一次答案检查。。一线