打印取輸出的反應本地

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