如何在ajax渲染组件时反应原生？

问题描述：

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

但我得到了一个错误如下。

RawText“”必须包装在明确的<Text>组件中。

答

我要去假设，根据您的伪代码，您了解如何获得从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> 
    ); 
    } 
}

这是一个只是简单的代码。您可以假设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()} 
    ... 
);

如何在ajax渲染组件时反应原生？

相关推荐