Question

我正在调用一个异步函数，并根据该响应，该函数应该返回一个不同的React Native Element。我编写了更简单的代码来创建相同的错误。

async function doNothing(){ };


class RouterComponent extends Component {

    render() {
        return(
            doNothing().then(()=> {
                return(
                    <View></View>
                );
            })

我得到的错误是

必须返回有效的React元素或（null）。您可能已经返回了undefined，数组或其他一些无效对象。

我在.then(statement)内返回一个有效的React元素。我如何更改它以便返回React元素。

Answer 1

如果要在同一文件中执行异步操作，请将异步调用移至某些生命周期方法，如ComponentDidMount。在构造函数中定义状态对象，

constructor(props) {
  super(props);
  this.state = {ComponentToRender: ''}
}

从componentDidMount方法触发网络调用，

componentDidMount() {
  doNothing().then(()=> {
     this.setState({
       ComponentToRender: <ComponentToRenderBasedOnResponse>
     })
  })
}

你的render方法应该使用this.state.ComponentToRender方法来决定要渲染的组件。

render() {
  if(this.state.ComponentToRender === 'A') {
    return this.renderComponentA();
  }
  else {
    return null;
  }
}

您可以决定如何组织渲染方法。

Answer 2

在这种情况下，渲染函数不是asncy函数。所以渲染功能不会等待你的doNothing完成。所以它返回null。你可以尝试这样的事情。

constructor(props) {
  super(props);
  this.state = { renderA: false, renderB: false }
}

componentDidMount() {
  doNothing().then((res)=> {
    if (res.Something){
      this.setState({ renderA: true })
    }
  });
}

renderA() {
  return (<View> view for A </View>);
}

renderB(){
  return (<View> view for B </View>);
}

render() {
  this.state.renderA ? this.renderA() : null;
  this.state.renderB ? this.renderB() : null;
}

异步函数后未返回React Native元素

2 个答案: