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

我的组件渲染了4次，这似乎是由抓取和多个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;```

类DuelList扩展React.Component{
状态={
决斗：[]，
用户：[]，
数据集：[]
};
fetchDuels=（）=>{
axios.get（“http://127.0.0.1:8000/api/duel/user/",
{'headers'：{'Authorization'：`Token${localStorage.getItem（'Token'）}}）
。然后（res=>{
这是我的国家({
决斗：资源数据
});
});
};
fetchUsers=（）=>{
axios.get（“http://127.0.0.1:8000/api/user/",
{'headers'：{'Authorization'：`Token${localStorage.getItem（'Token'）}}）
。然后（res=>{
这是我的国家({
用户：res.data
});
});
};
获取数据集=（）=>{
axios.get（“http://127.0.0.1:8000/api/dataset/",
{'headers'：{'Authorization'：`Token${localStorage.getItem（'Token'）}}）
。然后（res=>{
这是我的国家({
数据集：res.data
});
});
};
componentDidMount（）{
这个。fetchDuels（）；
this.fetchUsers（）；
这是fetchDatasets（）；
}
render（）{
返回(


决斗
);
}
}
导出默认DuelList```

您需要将所有承诺分组并一起解决：

    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

调用的数量。

利用

Promise.all

和setState，一旦所有API产生成功响应，如

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

    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() {
        Promise.all([this.fetchDuels(), this.fetchUsers(), this.fetchDatasets()]).then(([duels, users, datasets]) => {
            this.setState({
                 duels,
                 users,
                 datasets
            })
        });
    }


    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;

类DuelList扩展React.Component{
状态={
决斗：[]，
用户：[]，
数据集：[]
};
fetchDuels=（）=>{
返回axios.get（“http://127.0.0.1:8000/api/duel/user/",
{'headers'：{'Authorization'：`Token${localStorage.getItem（'Token'）}}）
};
fetchUsers=（）=>{
返回axios.get（“http://127.0.0.1:8000/api/user/",
{'headers'：{'Authorization'：`Token${localStorage.getItem（'Token'）}}）
};
获取数据集=（）=>{
返回axios.get（“http://127.0.0.1:8000/api/dataset/",
{'headers'：{'Authorization'：`Token${localStorage.getItem（'Token'）}}）
};
componentDidMount（）{
Promise.all（[this.fetchDuels（），this.fetchUsers（），this.fetchDatasets（）]）。然后（[duels，users，datasets]）=>{
这是我的国家({
决斗，
用户，
数据集
})
});
}
render（）{
返回(


决斗
);
}
}
导出默认DuelList；

谢谢！这有点帮助，但组件仍然渲染两次，我的下一步应该是什么？它将始终至少渲染两次，因为您正在执行异步调用。它将在没有数据的情况下呈现，然后在数据到达时再次呈现。好的，但是当一个获取函数url依赖于另一个获取函数响应时，该方法是什么？然后，您需要链接承诺。