javascript - 从 ReactJS 调用 javascript 函数

Question

我是 javascript 和 reactJS 的新手，但我被困住了。我有一个 javascript 文件，我可以在其中进行 REST 调用。该文件如下所示:

var data;
function getDataRequest() {
 const request = new XMLHttpRequest();
    request.open('GET', "localhost:8080/getData", true);
    request.onload = function () {
        var data = JSON.parse(this.response);
        if (request.status >= 200 && request.status < 400) {
            products = data;
        } else {
            console.log('error');
        }
    };
    request.send();
}
var getDataList = function() {
    getDataRequest();
    return data;
};
getDataList();

包含 React 组件的文件如下所示:

var = data;
class Datas extends React.Component {

    render() {
        data = this.getDataList;
        return (
            <DataTable data={data} />
        );
    }
}
export default Products;

问题是 React 组件中的数据仍然是“未定义的”。我在不同的文件中进行剩余调用，因为我想从多个 React 组件调用剩余调用。

Answer 1

您在渲染调用中从服务器获取数据，这是一个非常糟糕的主意。使用 componentDidMount 加载数据，然后将其存储在状态中。

首先，这是你的 Data.js:

export default {
  getDataList: () => fetch("//localhost:8080/getData").then(res => res.json())
};

在您的组件中，从“./Data”导入数据；，然后执行此操作:

componentDidMount = () => {  // using this syntax auto-binds 'this'
  Data.getDataList().then(res => {
    this.setState({ data: res });
  });
}

render() {
  return (
    <DataTable data={this.state.data} />
  );
}