Question

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

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;

const namess是我可以从另一个屏幕上获得的参数，可以在按菜单时进行渲染。但是fetch(url)中的变量名并没有刷新，但是可以正常工作。我需要呈现此当前网址。

Answer 1

初次看到类别页面时，将触发

componentDidMount()，当导航到另一个屏幕时，类别页面未未安装，因此赢得了componentDidMount()再次访问时不会被呼叫。

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

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

从屏幕到屏幕的数据传递不刷新componentDidMount

1 个答案: