在本机反应中打印获取输出

Question

我试图打印我的 fetch 输出，但我得到了错误 这是我的代码：

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

我尝试将获取输出存储到这样的数组中：

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

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

"objects are not valid as a react child"

我能做什么？

很多

Answer 1

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

--编辑--

对不起，我之前错了。 您似乎正在尝试将整个视图结构保存到 AsyncStorage。这不可能。您应该只将您自己的文本数据（如果需要，以 json 格式）保存到 AsyncStorage。 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>
        );
    }
}