Question

在我的react组件的return方法中，我想检查异步函数，只有满足才返回。这是我的代码：

render() {
      var data = new MyClass()
      data.helper(function(response){
         if(response.status === "authorised"){
           return (
              <div>
               <List videos={videos}/>
             </div>
            )

          }else{
            return (
              <div>
               <p>Please wait</p>
             </div>
            )
          }
       })


    }

但这种方式让我错误地说：

必须返回有效的反应组件。您将返回数组或列表或未定义

我想在我的逻辑之后显示数据。

Answer 1

我建议将AJAX调用移到componentDidMount生命周期方法，以便在挂载DOM节点时触发请求，然后在状态上有条件地设置authorised属性，这取决于成功的响应。然后使用此state属性在render方法中有条件地呈现不同的UI状态：

class MyComponent extends React.Component {
  constructor() {
    super();

    this.state = { authorised: false };
  }

  componentDidMount() {
    var data = new MyClass();
    data.helper((response) => {
      if (response.status === "authorised") {
        this.setState({ authorised: true })
      }
    });
  }

  render() {
    if (this.props.authorised) {
      return (
        <div>
          <List videos={videos}/>
        </div>
      );
    }
    return (
      <div>
        <p>Please wait</p>
      </div>
    );
  }
}

React渲染嵌套组件

1 个答案: