尝试返回没有类的api数据的问题

Question

我构建了一个api，它返回我在DB中注册的单元，但当试图返回这些单元时，这些单元并没有被检查

import React, { Component } from 'react';
import axios from 'axios';

const api = {

  units: () => {
    axios.get('http://192.168.0.23/api/public/api/units')
    .then(response => {
      console.log(response);
        return response.data.data
    }).catch((error) => { 
      console.log(error.message)
    });
    return 'Error'
  },

};

export default api;

响应正确显示数据，response.data.data如果在带有类的文件中使用，我可以设置状态单位 = []，并使用setState返回单位

然而，我想为api返回创建这个文件，但是因为我不使用类，所以我理解我不能使用状态。

有没有办法不让类返回这些数据，或者保存一个变量或类似的东西？

或者在没有类的情况下使用setState？

我相信这些将是解决我的问题的方法，但是如果其他人知道，而不是把api调用放在与最终类相同的文件中，可能也是如此。

我也试过这样做：

async function getUnits() {   
  return await axios.get('http://192.168.0.23/api/public/api/units');
}

getUnits.then((response) => {
  console.log(response);
    return response.data.data
}).catch((response) => { 
  console.log(response)
});

但是错误表明getUnits。然后不是一个函数

即使与正常的功能没有工作：

function units() {
  axios.get('http://192.168.0.23/api/public/api/units')
  .then(response => {
    console.log(response);
      return response.data.data
  }).catch((error) => { 
    console.log(error.message)
  });
  return 'Error'
};

Answer 1

如果我遇到你的问题，那么这就是你需要做的：

更改此项：

import React, { Component } from 'react';
import axios from 'axios';

const api = {

units: () => {
  axios.get('http://192.168.0.23/api/public/api/units')
    .then(response => {
      console.log(response);
      return response.data.data
    }).catch((error) => {
    console.log(error.message)
  });
  return 'Error'
},

};

export default api;

到：

import axios from 'axios';

const api = {

units: () => {
  return axios.get('http://192.168.0.23/api/public/api/units')
    .then(response => {
      console.log(response);
      return response.data.data
    }).catch((error) => {
    console.log(error.message)
  });
  return 'Error'
},

};

export default api;

在axios之前添加了一个return语句

然后在组件中使用它，如

import api from './api';
....
....
....
componentDidMount() {
  api.units().then(units => this.setState({ units }))
}
....
....
....

Answer 2

首先，在这个片段中

async function getUnits() {   
  return await axios.get('http://192.168.0.23/api/public/api/units');
}

getUnits.then((response) => {
  console.log(response);
    return response.data.data
}).catch((response) => { 
  console.log(response)
});

你犯了一个错误，你应该在这里调用getUnits函数eg

getUnits().then(.....)

关于是否使用有状态组件或功能组件，请查看此处的文档以了解有关差异的一些解释。

第一页讨论不管理自身状态的功能组件。第二页讨论状态。

根据您的情况，其中一个组件必须进行AJAX调用，因此必须有一个组件负责状态。如果您正在使用Redux，对话将变得非常不同。但是，如果不使用Redux，通常情况下，状态将位于高级有状态组件中，其下有无状态组件。基本组件将通过道具（只读）将数据（来自AJAX请求）传递给其无状态子级。

所以最后我们可以得到一些代码！在api对象中，让我们支持一种将数据传递回调用方的方法。这里我们添加了onLoad和onError回调参数，它们接受函数作为参数。当成功响应到达时，将使用来自API的数据调用onLoad回调。发生错误时，调用带有错误消息的onError回调。

import axios from 'axios';

const api = {
  units: (onLoad, onError) => {
    axios.get('http://192.168.0.23/api/public/api/units')
    .then(response => {
        onLoad(response.data.data);
    }).catch((error) => { 
        onError(error.message);
    });
  },
};

export default api;

现在，我们将使您的应用程序组件有状态（请记住，它可以有无状态的子级，通过道具传递数据）。注意，我们在组件装载之前调用API调用，因为我们在React的componentWillMountlifecycle方法中调用它。这不会阻止组件渲染，但因为api对象正在进行异步调用，这只会调用api请求，让组件立即渲染。数据到达后，您的api对象将调用onLoad回调，这是App组件的onApiLoad方法。App组件随后将更新其状态并重新渲染！

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import api from './units';

export default class App extends Component {

  constructor(props) {
    super(props);

    this.state = {units: []};
  }

  componentWillMount() {
    api.units(this.onApiLoad, this.onApiError);
  }

  onApiLoad(units) {
    this.setState({
      units: units
    });
  }

  onApiError(errorMessage) {
    // TODO Something meaningful with error message
  }

  render() {
    const unit = this.state.units.map((item, i) => (
      <div>
        <h1>{ item.example }</h1>
      </div>
    ));

    return (
      <View style={{ flexGrow: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Units: {unit}</Text>
      </View>
    );
  }
}

Answer 3

使用以下代码，它将帮助您。

通常我们会加载数据，然后渲染我们的应用程序。但是React期望所有数据都有一些初始状态，并且在AJAX请求完成后需要更新自己。因此，需要将所有数据存储在应用的状态中。

这看起来是这样的：

      import React, { Component } from 'react';
      import { Platform, StyleSheet, Text, View } from 'react-native';
      import axios from 'axios';


      export default class App extends Component { 

        constructor(props) {
          super(props);

          this.state = {units: []};
        }

        componentDidMount() {
          this.getUnits();
        }

        getUnits() {
          axios.get('http://192.168.0.23/api/public/api/units')
          .then(response => {
            this.setState({ units: response.data.data }));
          }).catch((error) => { 
            console.log(error.message)
          });
        }

        render() {
          const unit = this.state.units.map((item, i) => (
            <div>
              <h1>{ item.example }</h1>
            </div>
          ));

          return (
            <View style={{ flexGrow: 1, alignItems: 'center', justifyContent: 'center' }}>
              <Text>Units: {unit}</Text>
            </View>
          );
        }
      }

如果您希望子组件将数据向下传递给。下面是它的样子：

          const unit = this.state.units.map((item, i) => (
            <div>
              <h1>{ item.example }</h1>
             <Test unitData={item} />
            </div>
          ));

在不同的测试中组件

        class Test extends Component { //use the data in a class component

          constructor(props) {
            super(props);
          }

          render() {
            const unit = this.props.unitData

            return (
              <div className="test">
               <h1>{unit.example}</h1>
              </div>
            );
          }
        }

请检查此处的示例，这将帮助您解决问题。

示例：

redux示例 redux示例

希望这对你有帮助！！