javascript - 组件多次渲染 - 多个获取函数

Question

我的组件渲染了 4 次，这似乎是由 fetch 和多个 setState 函数引起的。我怎样才能让它只使用一个 setState() 包括所有获取的数据？

我已经尝试创建一个函数而不是一个，创建三个变量来存储获取结果并将它们传递给 setState，但这对我没有帮助。 提前致谢!

class DuelList extends React.Component {
    state = {
        duels: [],
        users: [],
        datasets: []
    };

    fetchDuels = () => {
        axios.get("http://127.0.0.1:8000/api/duel/user/",
            {'headers': {'Authorization': `Token ${localStorage.getItem('token')}`}})
            .then(res => {
                this.setState({
                    duels: res.data
                });
            });
    };

    fetchUsers = () => {
        axios.get("http://127.0.0.1:8000/api/user/",
            {'headers': {'Authorization': `Token ${localStorage.getItem('token')}`}})
            .then(res => {
                this.setState({
                    users: res.data
                });
            });
    };

    fetchDatasets = () => {
        axios.get("http://127.0.0.1:8000/api/dataset/",
            {'headers': {'Authorization': `Token ${localStorage.getItem('token')}`}})
            .then(res => {
                this.setState({
                    datasets: res.data
                });
            });
    };


    componentDidMount() {
        this.fetchDuels();
        this.fetchUsers();
        this.fetchDatasets();
    }


    render() {
        return (
            <div>
                <Duels data={this.state.duels}/> <br/>
                <h2> Add duel </h2>
                <AddDuelForm users={this.state.users} datasets={this.state.datasets} requestType="post" articleID={null}
                             btnText="Challenge"/>
            </div>
        );
    }
}

export default DuelList;```

Answer 1

您需要将所有 promise 分组并解决:

    fetchDuels = () => {
        return axios.get("http://127.0.0.1:8000/api/duel/user/",
            {'headers': {'Authorization': `Token ${localStorage.getItem('token')}`}})
    };

    fetchUsers = () => {
        return axios.get("http://127.0.0.1:8000/api/user/",
            {'headers': {'Authorization': `Token ${localStorage.getItem('token')}`}})
    };

    fetchDatasets = () => {
        return axios.get("http://127.0.0.1:8000/api/dataset/",
            {'headers': {'Authorization': `Token ${localStorage.getItem('token')}`}})
    };


    componentDidMount() {
        const promises = [this.fetchDuels(), this.fetchUsers(), this.fetchDatasets()];

        Promise.all(promises).then(([ duelsReponse, usersResponse, datasetsReponse ]) => {
            this.setState({ duels: duelsReponse.data, users: usersReponse.data, datasets: datasetsResponse.data });
        });
    }

这样，您就可以减少 setState 调用的次数。