Question

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

这是我的一些代码

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

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

这就是我要去的地方，我可以获得导航道具分机。但我找不到问题所在

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

Answer 1

更改您的 render 方法

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

render 方法应该只有 return 语句。不要在 render 方法内执行任何操作。现在它应该可以工作了。

反应原生导航刷新组件问题

1 个答案: