尝试在没有类的情况下返回 api 数据时出现问题

Question

我构建了一个 api，它返回我在数据库中注册的单位，但在尝试返回这些单位时，这些单位没有审查

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如果在具有类 I 的文件中使用，则可以设置状态units = []并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.then is not a function

即使使用正常功能也不起作用：

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

使用以下代码，它会帮助你。

通常，我们只会加载数据，然后呈现我们的应用程序。但是 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>
));

在不同的Test组件中

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

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

例子：

1. react-native-redux-example
2. 基本反应本机冗余示例

希望这对你有帮助！！

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函数，例如

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

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

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

根据您的情况，其中一个组件必须进行 AJAX 调用，因此必须有一个组件负责状态。如果您使用的是 Redux，对话将变得大不相同。但是，如果您不使用 Redux，则通常会将状态置于高级有状态组件中，其下方是无状态组件。基本组件将通过props(只读)将数据(来自 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;

现在我们将使您的App组件成为有状态的(请记住，它可以有通过props传递数据的无状态子组件)。请注意，我们在组件挂载之前调用 API 调用，因为我们在 React 的componentWillMount生命周期方法中调用它。这不会阻止组件呈现，因为您的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

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

更改此内容：

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 之前添加了一个返回语句

然后在您的组件中使用它，例如

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

Answer 4

在使用 javascript 编程的最初几天，我遇到了异步回调的问题，我发现使用纯函数在文件之间传递结果非常困难。我可以建议你，你可以在javascript中用异步编程在任何地方使用，与react无关.js

import React, { Component } from 'react';
import axios from 'axios';
const api = {
units: (callback) => {
axios.get('http://192.168.0.23/api/public/api/units')
.then(response => {
console.log(response);
callback(response.data.data);
}).catch((error) => { 
console.log(error.message)
});
return 'Error'
},
};
export default api;

在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: [],
};
}
//Always do async tasks(side effects) in componentDidMount, I will provide you a link to know Do's and Dont's with lifecycle hooks.
componentDidMount() {
if(this.state.units.length === 0){
api.units((data) => this.setState({units: data}));
}
}
render() {
return (
<View style={{ flexGrow: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Units: {this.state.units}</Text>
</View>
);
}
}

这是在 Javascript 中处理异步操作时传递回调函数的方式，因为您无法从异步函数返回evaluated结果，因为一旦结果仍在评估中，您的函数就会return一些东西并退出scope，但是您可以使用异步操作的callback处理程序最终根据评估的视图更新视图result.我只处理success回调，您也可以传递error回调来处理错误情况。