Promise返回JSX Element问题-React解决方案

1、背景

 

绘制一个多级控件，控件中定义的一个option为返回JSX Element的函数，但是业务需要触发该操作时需要向后台请求数据，根据请求回来的数据去构造该JSX Element。

 

2、问题描述

 

真实调用过程中，由于option指向函数的调用是同步的，函数返回总是优先于异步请求回来后台数据，导致元素渲染失败。

 

3、解决方案

 

3.1、使用同步Ajax请求函数

 

3.2、使用ES7语法，同步化Promise调用

http://es6.ruanyifeng.com/#docs/promise

https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep

 

3.3、返回的JSX Element以新的控件方式提供

在新控件内部利用ComponentDidMount(该钩子中进行Ajax函数调用，并重新setState)、setState二次渲染该二级控件。

 

4、实践

 

鉴于目前使用框架限制，使用第三种方案(JSX Element以新的控件方式)

代码如下：
 

import React, { Component, PropTypes } from 'react';
import Table from 'xxx';
import HttpUtil from 'xxx';

const url = '/rest/xxx';

class View extends React.Component {
  state = {
    callbackStructure: null
  };

  getPromise = () => {
    return new Promise((resolve, reject) => {
      HttpUtil.get(
        url,
        {},
        data => {
		  this.ipList = data;
          resolve(this.ipList);
        },
        e => {
          this.ipList = [];
          reject(this.ipList);
        }
      );
    });
  };

  componentDidMount() {
    console.log("handleRowExpend callback row : ", this.props.row);
    this.getPromise()
      .then(data => {
        return (
            this.setState({callbackStructure: <div>{data}</div>})

        );
      })
      .catch(data => {
        return (
            this.setState({callbackStructure: <div>我请求失败了</div>})
        );
      });
    console.log(this.data);
  }
  render() {
    return <div>{this.state.callbackStructure ? this.state.callbackStructure : "我在请求"}</div>;
  }
}

class TableDoubleSelectOptions extends Component { 

  handleRowExpend = (row) => {
    return <View row={row} />
  }

  render() {
  
    return (
      <div>
        <Table
          onRowExpend={this.handleRowExpend} // 行展开事件回调
          xxx
        />
      </div>
    );
  }
};

 

参考：

https://segmentfault.com/q/1010000007889310

https://blog.csdn.net/a695993410/article/details/80954552