如何在ajax渲染組件時反應原生？

我的代碼是如何在ajax渲染組件時反應原生？

const main =() => { 
    let caption; 
    AsyncStorage.getItem("XXX", (err, result) => { 
    caption = <View>...</View> 
    }); 
    render (
    ... 
    {caption} 
    ... 
); 
}

但我得到了一個錯誤如下。

RawText「」必須包裝在明確的<Text>組件中。

來源

2016-09-21 Eric Chan

我要去假設，根據您的僞代碼，您瞭解如何獲得從AsyncStorage數據，它的不是一個好主意是使用AsyncStorage您render函數裏面，你不實際上意味着阿賈克斯，而是本地存儲。

但誤差顯示出來，因爲你需要確保你包一個<Text>元素中的文本。如果你看一下this paragraph它說：

在本地做出反應，我們更嚴格一下：你必須換一個<Text>組件內部的所有文本節點;你不能直接在<View>下有一個文本節點。

編輯：

class MyComponent extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     data: '', 
    }; 
    } 

    componentDidMount() { 
    AsyncStorage.getItem('XXX', (err, result) => { 
     // @TODO: You should handle errors too 
     this.setState({ 
     data: result.text, 
     }); 
    }); 
    } 

    render() { 
    // Returning null will not render anything 
    // Once the results come in, it will update automatically 
    if (!this.state.data) return null; 
    // Raw text must be wrapped in Text 
    return (
     <Text>{this.state.data}</Text> 
    ); 
    } 
}

來源

2016-09-21 14:03:10 rclai

這是一個只是簡單的代碼。您可以假設AsyncStorage喜歡異步調用。我需要如何在異步調用完成後在回調函數中呈現組件。 –

我更新了代碼。 – rclai

你可以嘗試股票數據的狀態，並顯示您的組件白衣功能：

AsyncStorage.getItem("XXX", (err, result) => { 
    this.setState({result:result}) 
}); 

function element(){ 
    if([check if your state is not null]) 
    return(
     <View>... {this.state.result} ...</View> 
    ) 
} 

render (
    ... 
    {this.element()} 
    ... 
);

來源

2016-09-21 13:10:04

如何在ajax渲染組件時反應原生？

回答

相關問題