打印取输出的反应本地

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

什么，我试图它对获取输出存储阵列是这样的：

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

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

"objects are not valid as a react child" 

我该怎么办？

TNX很多

Answer 1

您提供的是不完整的，所以很难理解其中的错误实际发生的事情，但代码，根据错误，似乎“info.specialTitle”是一个对象，不是一个字符串。

- 编辑 -

对不起，我错了。 看起来好像你试图将整个View结构保存到AsyncStorage。这不可能。你应该只保存到AsyncStorage你自己的文本数据（如果你愿意，可以使用json格式）。 JSX将视图转换为更复杂的对象，可能具有循环结构，您不能（也不应该）保存在AsyncStorage中。

尝试保存数据U接收，然后呈现像这样（未经）滑块：

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