Question

我有以下代码，必须从同一数据库中的所有文件中获取数据。 Node.js在后端运行。当我尝试下面的代码时，我总是会得到最新的数据，任何人都可以帮助我解决此问题。下面是来自React JS前端的。

    componentDidMount() {
        console.log("This Worked Sucessfully")
        this.getDataFromDb();
        if (!this.state.intervalIsSet) {
          let interval = setInterval(this.getDataFromDb, 1000);
          this.setState({ intervalIsSet: interval });
        }
      }

      getDataFromDb = () => {fetch('http://172.24.78.202:3001/api/passed')
          .then(data => data.json())
          .then(res => this.setState({ passed: res.data }));
      };

      getDataFromDb = () => {fetch('http://172.24.78.202:3001/api/failed')
          .then(data => data.json())
          .then(res => this.setState({ failed: res.data }));
      };

      getDataFromDb = () => {fetch('http://172.24.78.202:3001/api/all')
          .then(data => data.json())
          .then(res => this.setState({ data2: res.data }));
      };
      render() {
        const primaryColor = getColor('primary');
        const secondaryColor = getColor('secondary');
        const { passed, failed, data2 } = this.state

Answer 1

从您的代码中可以看到，您似乎两次重写了goGetDataFromDB。尝试更改每个函数的名称或调用它们的方式。您还可以利用Promise.all将每个调用的结果分组到单个返回句柄中。

Check this link for the documentation of Promise.all

您可以将当前代码重构为如下形式：

class MyComponent extends React.Component {
  componentDidMount() {
    this.getDataFromDb();
    if (!this.state.intervalIsSet) {
      let interval = setInterval(this.getDataFromDb, 1000)
      this.setState({intervalIsSet: true })
    }
  }

  getDataFromDb = () => {
    Promise.all([
      'http://172.24.78.202:3001/api/passed',
      'http://172.24.78.202:3001/api/failed',
      'http://172.24.78.202:3001/api/all'
    ].map(url => (
      fetch(url)
        .then(data => data.json())
        .then(res => res.data)
      )
    )).then(([passed, failed, data2]) => 
      this.setState({ passed, failed, data2 })
    );
  }

  render() {
    //...
  }
}

我试图保留尽可能多的代码，以便您可以注意到差异。

我希望这会有所帮助。

如何从前端react.js中的node.js从多个数据库中获取数据

1 个答案: