使用静态获取服务

Question

我创建了一个express mongoose api。我想使用我的React应用程序中的那个api。

我想创建一个服务来管理那些api请求。但我是react native的新手，不能使用该服务。我尝试创建一个静态类，但无法使其工作。这里有一个例子：

// apiService.js
class ApiService {
static fetchUsers = () => {
return fetch('XXX/users')
.then((response) => {
return response.json()
.then((data) => {
return data;
})
})
.catch((error) => {
console.error(error);
});
}
}
export default ApiService;

我的屏幕

// UserScreen.js
import ApiService from '../services/apiService';
export default class UserScreen extends Component {
constructor(props) {
super(props);
this.state = {
users: [],
isLoading: true,
}
}
componentDidMount = () => {
let users = ApiService.fetchUsers();
this.setState({data: users});
this.setState({isLoading: false});
}
render() {
if (this.state.isLoading) {
return (
<View style={styles.container}>
<ActivityIndicator/>
</View>
)
} else {
return (
<View style={{ flex: 1, marginTop: 100 }}>
{
this.state.data.map((val, key) => {
return <TouchableOpacity
style={styles.homeButton}
key={key}
onPress={() => this.redirectHandler(val)}>
</TouchableOpacity>
})
}
</View>
)
}
}

}

我尝试使用异步等待，但找不到检索数据的方法。数据在apiService中检索得很好，但我无法与UserScreen共享。

如何在react native中使用(静态或非静态(类/函数并从屏幕中获取数据

更新以下是我对异步的尝试

class ApiService {
static fetchUsers = async () => {
try {
let response = await fetch('XXXXX/users/');
let json = await response.json();
return json;
} catch (error) {
console.error(error);
}
}
}
export default ApiService;

在我的用户屏幕中

componentDidMount = async () => {
try {
let users = await ApiService.fetchUsers();
this.setState({isLoading: false});
this.setState({data: users});
} catch (error) {
console.log(error);
}
}

Answer 1

问题在于执行两次的setState。如果您查看组件的逻辑，首先我们检查isLoading，如果为true，我们将显示一些消息/微调器，否则我们将显示用户/数据列表。

设置状态的顺序：

this.setState({isLoading: false});
this.setState({data: users});

请注意，每个setState都会触发组件的重新渲染，因此在这种情况下，我们首先将isLoading设置为false(第一次重新渲染(，然后将数据设置为(第二次重新渲染

问题是，当第一次重新渲染完成时，isLoading被设置为false，并且我们上面讨论的条件现在进入"；示出了用户/数据列表"；部分这里需要注意的另一件事是，我们在状态中定义了users: []，当我们设置用户数组时(通过api调用(，我们在一个名为data的变量中设置它。变量CCD_ 3从未在状态中定义；未定义"；。

代码中的问题：

this.state.data.map(...)

不能映射到未定义的变量上，这就是问题所在。这样做会抛出一个错误，说"；无法读取"未定义"的属性映射；。

要解决此问题：

设置用户列表时，不执行this.setState({ data: users })，只执行this.setState({ users: users })并将this.state.data.map(更改为users.map(

此外，不必要的重新渲染成本高昂，在React Native的情况下，成本更高。尽可能合并您的setState(…(调用。例如，

this.setState({
isLoading: false,
users: users
})