javascript - 使用静态抓取服务

问题描述

我创建了一个 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);
        }
    }

标签： javascriptreact-nativefetch

解决方案

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

设置状态的顺序：

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

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

问题是，当 1st Re-Render 完成时，isLoading 设置为 false 并且我们上面谈到的条件现在进入“显示用户/数据列表”部分。这里要注意的另一件事是我们users: []在 state 中定义，当我们设置 users 数组（来自 api 调用）时，我们将其设置在一个名为data. 该变量data从未在状态中定义，因此本质上它是“未定义的”。

您的代码中的问题：

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

javascript - 使用静态抓取服务

问题描述

解决方案

推荐阅读