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

Question

我的代码是

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

但是我收到了如下错误。

  

RawText“”必须包含在显式的<Text>组件中。

Answer 1

我将假设，根据您的伪代码，您了解如何从AsyncStorage获取数据，它不是一个好主意在AsyncStorage函数中使用render，并且您实际上并不是指ajax而是本地存储。

但是错误显示是因为您需要确保将文本包装在<Text>元素中。如果你看this paragraph它说：

  

在React Native中，我们对它更严格：你必须将所有文本节点包装在<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>
    );
  }
}

Answer 2

您可以尝试在状态下存储数据，并在功能中显示您的组件：

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