Question

我试图打印我的提取输出，但我收到了错误这是我的代码：

sliderRender(info) {
    return (
        <View style={styles.mainCarouselView}>
            <Image style={styles.mainCarouselImage} source={{uri: info.sliderImg}} />
            <View style={styles.mainCarouselOverlay}>
                <Text style={styles.mainCarouselTitle}>{info.specialTitle}</Text>
            </View>
        </View>
    );
}

getSlider() {
    fetch(GLOBALS.API + '/specials.php?action=getSlider&key=' + GLOBALS.KEY)
    .then((response) => response.json())
    .then((responseJson) => {
        var output = [];
        let response = responseJson.response;
        if(response instanceof Array && response.length > 0) {
            for(var i = 0; i < response.length; i++) {
                output.push(this.sliderRender(response[i]));
            }
            try {
                AsyncStorage.setItem('slider', JSON.stringify(output));
            } catch (error) {
                console.log("error when we set local storage " + error.toString());
            }
        }

    })
    .catch((error) => {
        console.log(error.toString());
    });
    try {
        AsyncStorage.getItem('slider', (err, result) => {
            let slider = JSON.parse(result);
            this.setState({
                sliderOp: slider
            });
        });
    } catch (error) {
        console.log("error by get item " + error.toString());
    }
}

showSlider() {
    var Carousel = require('react-native-carousel');
    if (this.state.sliderOp !== null) {
        return (
            <Carousel
                style={styles.mainCarousel}
                hideIndicators={true}
                animate={false}>
                {this.state.sliderOp}
            </Carousel>
        );
    }
}

我试图将fetch输出存储到数组中，如下所示：

output.push(this.sliderRender(response[i]));

并将其存储在状态中并最终打印状态... 但错误是：

"objects are not valid as a react child"

我能做什么？

tnx很多

Answer 1

~~您提供的代码不完整，因此很难理解错误实际发生的位置，但根据错误，似乎“info.specialTitle”是一个对象而不是字符串。~~

- 编辑 -
抱歉，以前我错了。您似乎正在尝试将整个View结构保存到AsyncStorage。这是不可能的。您应该只保存AsyncStorage您自己的文本数据（如果需要，可以采用json格式）。 JSX将View转换为更复杂的对象，可能是圆形结构，你不能（也不应该）保存在AsyncStorage中。

尝试保存您收到的数据，然后像这样渲染滑块（未经测试）：

sliderRender(info, key) { return ( <View key={key} style={styles.mainCarouselView}> <Image style={styles.mainCarouselImage} source={{uri: info.sliderImg}} /> <View style={styles.mainCarouselOverlay}> <Text style={styles.mainCarouselTitle}>{info.specialTitle}</Text> </View> </View> ); } getSlider() { fetch(GLOBALS.API + '/specials.php?action=getSlider&key=' + GLOBALS.KEY) .then((response) => response.json()) .then((responseJson) => { var output = []; let response = responseJson.response; if(response instanceof Array && response.length > 0) { for(var i = 0; i < response.length; i++) { output.push(response[i]); } try { AsyncStorage.setItem('slider', JSON.stringify(output)); } catch (error) { console.log("error when we set local storage " + error.toString()); } } }) .catch((error) => { console.log(error.toString()); }); try { AsyncStorage.getItem('slider', (err, result) => { let slider = JSON.parse(result); this.setState({ sliderOp: slider }); }); } catch (error) { console.log("error by get item " + error.toString()); } } showSlider() { var Carousel = require('react-native-carousel'); if (this.state.sliderOp !== null) { const sliderOps = this.state.sliderOp.map((op, i) => this.slideRender(op, i)); return ( <Carousel style={styles.mainCarousel} hideIndicators={true} animate={false}> {sliderOps} </Carousel> ); } }

反应原生打印提取输出

1 个答案: