0

我正在使用一个平面列表，并且有一些使用 fetch API 的项目，但是当我根据id另一个页面上的发送项目时，它不会显示任何内容。在另一个页面上，我正在根据id. 它没有显示的数据。当我创建本地 JSON 时，它也会呈现单个项目，但在我使用获取的 JSON 时不会。这是我的代码，我在 renderItem 函数中有一个按钮详细信息，当我点击它时，我会在描述页面上使用 fetch 在组件中获取 json 并安装。但根据 id，它不会呈现因为我需要特定的产品描述。

 constructor(props) {
    console.log('constructer called');
    super(props)

    this.AddToCart = this.AddToCart.bind(this);
    this.renderItem = this.renderItem.bind(this);

    this.state =
        {
            showToast: false,
            qty:0,
            dataSource: [],                
            opacity: new Animated.Value(0)

        }
}




 renderItem = ({ item }) => {


    console.log('all the items from SliderProductPage  ' + item.name + ' is  ' + JSON.stringify(item.category_id));

    return (

        <View style={{ flex: 1, flexDirection: 'column', }}>


            <View style={{

                justifyContent: 'center',
                alignItems: 'center',
                borderBottomWidth: responsiveHeight(0.2),
                marginHorizontal: responsiveHeight(5),
                borderBottomColor: 'tomato',
                //backgroundColor: this.props.index % 2 == 0 ? 'mediumseagreen': 'tomato'                
                //backgroundColor: 'tomato'
            }}>

                <Animated.Image
                    onLoad={this.onLoad}
                    {...this.props}
                    source={{ uri: item.item_url }}
                    style={{
                        opacity: this.state.opacity,
                        transform: [
                            {
                                scale: this.state.opacity.interpolate({
                                    inputRange: [0, 2],
                                    outputRange: [0.85, 1]


                                })
                            }],
                        width: responsiveHeight(40),
                        height: responsiveHeight(35),
                        justifyContent: 'center',
                        marginTop: responsiveHeight(3),
                        alignItems: 'center'

                    }}
                >

                </Animated.Image>


                <View style={{justifyContent:'center', alignItems: 'center', marginBottom:responsiveHeight(2), }}>
                     <Text style={{ fontSize: responsiveFontSize(1.6), color: 'red', }}> {item.name} </Text>
                    <Text style={{ fontSize: responsiveFontSize(1.6), color: 'red', }}> $ {item.price} </Text>
                    <Text style={{ fontSize: responsiveFontSize(1.6), color: '#000000', marginHorizontal: responsiveHeight(2) }}>{item.description} </Text>
                </View>


                <View style={{

                    marginBottom: responsiveHeight(1.5),
                    flexDirection: 'row',
                    alignItems: 'center',

                }}>

                    <TouchableNativeFeedback activeOpacity={.5} onPress={() => this.props.navigation.navigate('ProductDescription', { id: item.id }, console.log("ProductDetails-SliderProductPage sending id-------" + JSON.stringify(item.id)))}
                        background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
                        <View style={styles.button}>
                            <Text style={styles.buttonText}>Details</Text>
                        </View>
                    </TouchableNativeFeedback>

                    <TextInput 
                    onChangeText={(update)=> this.setState({qty:update})}
                    keyboardType="numeric"  placeholder="0" placeholderTextColor="red"  underlineColorAndroid="transparent"
                    style={{padding:0,
                        borderWidth:0.5,
                        borderColor:'green',
                        height:responsiveHeight(4),
                        width:responsiveWidth(10),
                        color:'red',
                        //alignContent:'center'
                        textAlign:'center'
                    }} >

                        {this.state.quantity}
                    </TextInput>


                    <TouchableNativeFeedback  onPress={this.AddToCart.bind(this,item)}
                        //()=>this.props.navigation.navigate('AddCartItems',{id:item.id,name:item.name},console.log("SliderProductPage sending id and name to ADD to cart page-------"+JSON.stringify(item.id+" and "+item.name),alert(item.name+ "  Added ")))} 
                        background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
                        <View style={styles.button}>
                            <Text  style={styles.buttonText}>Add</Text>

                        </View>
                    </TouchableNativeFeedback>

                </View>
            </View>
            <View style={{
                height: 1,

                backgroundColor: 'white'

            }}>

            </View>


        </View>




    )
}



 componentDidMount() {
    console.log("we are on slider page componentDidMount function")
    const { navigation } = this.props;
    const id = navigation.getParam('id', 'NOT A ID');
    const name = navigation.getParam('name', 'not a valid name')
    console.log("here is id fetch data" + JSON.stringify(id) + ":::::::::SliderPage::::::::::" + JSON.stringify(name))

    const url = 'http://192.168.0.105:8081/products/get/alldata/item?category_id=' + id;

    fetch(url)
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({
                dataSource: responseJson.Category,


            }, console.log("**************helo it is response sliderPage data********************" + JSON.stringify(responseJson.Category)))

        })
        .catch((error) => {
            console.log(error);
        })
}


   render() {

    var textValue = this.state;
    console.log("we are on slider page  render Function")

    const { navigate } = this.props.navigation;
    const { navigation } = this.props;
    const id = navigation.getParam('id', 'not an valid id');
    const name = navigation.getParam('name', 'not a valid name')
    console.log(id);

    return (
        <View>

            <FlatList
                extraData={this.state}
                data={this.state.dataSource}
                renderItem={this.renderItem}
                keyExtractor={item => item.name}
                keyboardShouldPersistTaps="always"
                onEndThreshold={0}
            />


        </View>


    )
}

};

Product_Description逻辑页面-：

constructor(props) {
    console.log('constructer called');
    super(props)

    this.state = {

        dataSource: [],
        opacity: new Animated.Value(0)
    }
}

onLoad = () => {
    Animated.timing(this.state.opacity, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true,
    }).start();
}

static navigationOptions = {

}


componentDidMount() {
    console.log("we are on Product_Description_Logic page componentDidMount function")
    const { navigation } = this.props;
    const id = navigation.getParam('id', 'NOT A id');

    console.log("here is name fetch data" + JSON.stringify(id))

    const url = 'http://192.168.0.105:8081/products/get/item_desc?item_id=' + id;

    fetch(url)
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({
                dataSource: responseJson.item_desc,


            }, console.log(responseJson.item_desc))
        })
        .catch((error) => {
            console.log(error);
        })
}
renderItem = ({ item,index }) => {
    console.log("-----------------------render item data Product_Description_Logic is---------------:: " + JSON.stringify(item))
    return (



        <View style={{ flexDirection: 'column', }}>

            <View style={{
                flex: 1,
                //height: responsiveHeight(50),
                //width: responsiveWidth(100),
                alignItems: 'center',

            }}>

                <Animated.Image
                    onLoad={this.onLoad}
                    {...this.props}
                    source={{ uri: item.item_url }}
                    style={{
                        opacity: this.state.opacity,
                        transform: [
                            {
                                scale: this.state.opacity.interpolate({
                                    inputRange: [0, 2],
                                    outputRange: [0.85, 1]
                                })
                            }],
                        width: responsiveHeight(35),
                        flex: 1,
                        height: responsiveHeight(25),
                        marginTop: responsiveHeight(3),
                        alignItems: 'center'
                    }}>

                </Animated.Image>
            </View>


            <View style={{ flex: 1 }}>


                <View style={{ flexDirection: 'row' }}>

                    <Text style={{ fontSize: responsiveFontSize(1.6), color: 'black', }}> Price : {item.price} </Text>


                    <TouchableWithoutFeedback>
                        <View style={{
                            alignItems: "center",
                            justifyContent:'center',
                            padding: responsiveHeight(0.5),

                            backgroundColor: '#ffab40',
                            marginHorizontal: responsiveHeight(8),
                            height: responsiveHeight(4.5),
                            width: responsiveWidth(30),
                            borderRadius: responsiveHeight(1)

                        }}>
                            <Text style={{ color: '#000000', fontSize: responsiveFontSize(1.8), justifyContent: 'flex-end', }}>Add to Cart</Text>
                        </View>
                    </TouchableWithoutFeedback>


                </View>




                <Text style={{
                    fontSize: responsiveFontSize(2),
                    color: '#000000',
                    //marginHorizontal: responsiveHeight(1)
                }}>{this.state.description}</Text>
                <Text style={{ fontSize: responsiveFontSize(1.7), color: '#000000', }}> available:  {item.available} </Text>


            </View>




            <View style={{ margin: responsiveHeight(1), }} >
                <Text style={{ fontSize: responsiveFontSize(2), color: 'green', }}>{item.available} </Text>
                <Text style={{ fontSize: responsiveFontSize(2), color: '#000000', }}>Quantity: 5 </Text>

            </View>


            <Text style={{ fontSize: responsiveFontSize(2), color: '#000000', margin: responsiveHeight(1) }}>About this item </Text>

            <View style={{ borderWidth: responsiveHeight(0.1), margin: responsiveHeight(2), borderColor: 'gray' }}>
                <Text style={{ fontWeight: 'bold', color: '#000000', fontSize: responsiveHeight(2) }}>  Features and details: </Text>
                <Text style={{ fontSize: responsiveHeight(2), color: '#000000', marginHorizontal: responsiveHeight(1) }}> Graded, sorted and premium quality fruits </Text>
                <Text style={{ fontWeight: 'bold', color: '#000000', fontSize: responsiveHeight(2) }}> Product Details: </Text>

                <View style={{ flexDirection: 'row' }}>
                    <Text style={{ fontSize: responsiveHeight(2), color: '#000000', marginHorizontal: responsiveHeight(1), fontWeight: 'bold' }}> Manufacturer:</Text>
                    <Text style={{ fontSize: responsiveHeight(2), color: '#000000', marginHorizontal: responsiveHeight(1), }}>Fresh</Text>


                </View>
                <View style={{ flexDirection: 'row' }}>
                    <Text style={{ fontSize: responsiveHeight(2), color: '#000000', marginHorizontal: responsiveHeight(1), fontWeight: 'bold' }}> Item Part Number:</Text>
                    <Text style={{ fontSize: responsiveHeight(2), color: '#000000', marginHorizontal: responsiveHeight(1), }}>Apple_163</Text>
                </View>
                <View style={{ flexDirection: 'row' }}>
                    <Text style={{ fontSize: responsiveHeight(2), color: '#000000', marginHorizontal: responsiveHeight(1), fontWeight: 'bold' }}> ASIN:</Text>
                    <Text style={{ fontSize: responsiveHeight(2), color: '#000000', marginHorizontal: responsiveHeight(1), }}>vhajgdgvhjdjhd</Text>
                </View>

                <View style={{ borderBottomColor: 'gray', borderBottomWidth: responsiveHeight(0.1) }} />

                <Text style={{ fontWeight: 'bold', color: '#000000', fontSize: responsiveHeight(2), marginHorizontal: responsiveHeight(1) }}>Description: </Text>
                <Text style={{ color: '#000000', fontSize: responsiveHeight(1.8), marginHorizontal: responsiveHeight(1) }}>
                    {item.description}  </Text>

                <View style={{ borderBottomColor: 'gray' }} />
                <Text style={{ fontWeight: 'bold', color: '#000000', fontSize: responsiveHeight(2) }}> Important Information: </Text>

                <Text style={{ color: '#000000', fontSize: responsiveHeight(1.8), marginHorizontal: responsiveHeight(1) }}>
                    {item.imp_info}
                </Text>



                <TouchableWithoutFeedback>
                    <View style={{
                        alignItems: 'center',
                        padding: responsiveHeight(1),
                        backgroundColor: '#ffab40',
                        margin: responsiveHeight(5),
                        borderRadius: responsiveHeight(1)
                    }}>
                        <Text style={{ color: '#000000', fontSize: responsiveFontSize(1.8) }}>Continue Shopping</Text>
                    </View>
                </TouchableWithoutFeedback>



            </View>




        </View>




    );
}





render() {
    const { navigate } = this.props.navigation;
    const { navigation } = this.props;
    const id = navigation.getParam('id', 'not an valid id');

    console.log("this is prodcuctionDescription Render Fun" + JSON.stringify(id))


    return (

        <View>

            <FlatList
                data={this.state.dataSource}


                renderItem={this.renderItem}

                keyExtractor={item => item.name}

                onEndThreshold={0}


            />



        </View>




    )
}

};

4

1 回答 1

1

有同样的问题，并从@ValdaXD 那里得到了解决让我逐字引用他

它可能不是平面列表，因为它适用于一个项目......它可能是数据

一些 API 会为多个数据返回一个 json 数组，例如：[{1...},{2...},{3...}]这很受 faltlist 组件的欢迎。但是当只请求一个 item 时，apis 返回一个单独的 json Ex: {1...}，并且 faltlist 只接受一个 json 数组，而不是一个单独的 json ...

为此，您可以使用验证器函数来检查数据是数组还是单个 json ，并在将其用作平面列表数据之前调用它。如果您同时放置来自项目组或单个项目的响应，这会有所帮助

formatJSON(data){
    var result = []
    if(!Array.isArray(data)){//if is not an array
        result.push(data) // push it as the first item of an array
    }else{
        result=data
    }

    return result
}

所以把这个添加到你的获取中

componentDidMount() { console.log("我们在 Product_Description_Logic 页面 componentDidMount 函数") const { navigation } = this.props; const id = navigation.getParam('id', 'NOT A id');

console.log("here is name fetch data" + JSON.stringify(id))

const url = 'http://192.168.0.105:8081/products/get/item_desc?item_id=' + id;

fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
        this.setState({
            dataSource: this.formatJSON(responseJson.item_desc),


        }, console.log(responseJson.item_desc))
    })
    .catch((error) => {
        console.log(error);
    })
 }

这个技巧对我有用

于 2019-01-26T23:10:54.773 回答