ReactJs将其他文件中的函数保存到组件中的变量答案

【问题标题】：ReactJs Save function from other file to variable in ComponentReactJs将其他文件中的函数保存到组件中的变量
【发布时间】：2022-01-05 04:44:35
【问题描述】：

我有这个文件 apiService.js

import axios from "axios";

const url = "/getCrimesByCategory/AUTO_THEFT";

export function getAllCrimes() {
    axios.get(url).then(response => {
        console.log(response.data)
        return response;
    })
}

还有这个文件：数据页.js

import React, { Component } from 'react';
import { MDBDataTable } from 'mdbreact';
import '../App.css';
import { getAllCrimes } from '../controller/ApiService.js';

class DataPage extends Component {

  render() {

    str = getAllCrimes();
    console.log("this is str: " + str)
    return (
      <p>this is str: {str}</p>
    );
  }
}

export default DataPage;

问题是 console.log("this is str: " + getAllCrimes()) 返回 "this is str: undefined"

我需要返回函数的响应，以便稍后在 dataPage react 组件中使用。

【问题讨论】：

标签： node.js reactjs api axios

【解决方案1】：

这里有几个问题：

您已从getAllCrimes 函数返回数据。您只需在 API (axios) 调用前添加 return 即可解决此问题。
即使返回，您也不会获得数据，因为 API 调用以不同的方式工作。它们异步工作。您不会立即获得数据（在您的 render 方法中）。但是，您可以在这里利用状态和生命周期方法的优势来解决它。

class DataPage extends Component {
  state = {
    str: null, // or "", or {}, or [], based on your need.
  };

  componentDidMount() {
    getAllCrimes.then((crimes) => {
      this.setState({
        str: crimes,
      });
    });
  }

  render() {
    const { str } = this.state;
    console.log("this is str: " + str);
    return str ? <p>this is str: {str}</p> : <p>You gotta wait</p>;
  }
}

我已经为组件创建了一个状态，str 最初是 null。我只是让组件渲染，一旦渲染完成，componetDidMount 就会执行。它调用 API（函数），一旦 API 返回某个值，它将传递给 then。（如果不熟悉，请学习Promises）。在那里，我们更新了导致重新渲染的状态，但现在str 有了数据。

【讨论】：