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

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} />
  );
}

Answer 2

您需要了解React组件的生命周期。简而言之，React以某种顺序调用某些函数。一些在组件呈现之前被调用，一些在之后被调用。在您的情况下，您希望在呈现组件后进行API调用。适当的生命周期方法是componentDidMount。有关组件生命周期方法的更多详细信息，请参阅here。

以下是此行为的示例。请注意，我使用了fetch API而不是XmlHttpRequest。使用起来更干净，是JavaScript的一部分。

class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loaded: false,
      something: ""
    };
  }

  componentDidMount() {
    fetch("exampleurl")
      .then(response => {
        return response.json();
      })
      .then(json => {
        // perform desired checks etc

        this.setState({
          something: json.someProperty
        });
      });
  }

  render() {
    if (!this.state.loaded) {
      return <div>{"Loading..."}</div>;
    }

    return <div>{this.state.something}</div>;
  }
}

export default Example;

Answer 3

您需要将回调传递给通用函数才能更新状态

function getDataRequest(callback) { // here
    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) {
            callback(data) // here
        } else {
            console.log('error');
        }
    };
    request.send();
}

在第一次渲染之后，您需要创建一个状态并在componentDidMount中触发调用。

export default class Datas extends React.Component {

    state = {
        data: null // or [] ?
    }

    componentDidMount(){
        const callback = (value) => {
            this.setState({
                data: value
            })
        }
        this.getDataList(callback);
    }

    render() {
        const {
            data
        } = this.state;

        return (
            <DataTable data={data} />
        );
    }
}

Answer 4

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

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

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