从 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 组件中的数据仍然是“未定义的”。我在不同的文件中进行剩余调用，因为我想从多个反应组件调用剩余调用。

原文由 Catalin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

首先，这是你 Data.js ：

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

在您的组件中， import Data from './Data'; ，然后执行此操作：

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

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

原文由 user5734311 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

首先，你的 React 组件中没有函数 getDataList Datas 。其次，如果你想从你的 React Componet 调用 getDataList ，请导出或使你的函数是全局的。您可以使用：

 window.getDataList = function() {
    getDataRequest();
    return data;
};

在您的 React 组件中，您可以轻松调用 window.getDataList() 。

原文由 Dai Nguyen 发布，翻译遵循 CC BY-SA 4.0 许可协议