Javascript 当promise.all解析时，如何筛选处于两种不同状态的数据？

我发送了两个请求以获取

1-我的服务 2-行政服务

当我得到响应时，我将状态设置为“myService，admin”

现在是包含我的服务的管理服务。 因此，我想筛选管理服务中的服务是否从阵列中删除管理服务

因此，我尝试使用

新设置

但不起作用，也许我错过了一些东西

还有一个问题，我使用

Promise.all

来等待这两个请求，但是当我在那里记录状态时，我得到了初始状态“empty”

“我的服务和管理”数据示例

代码片段

  const [myServices, setMyServices] = useState([]);
  const [adminServices, setAdminServices] = useState([]);
  const [allService, setAllService] = useState([]);

  useEffect(() => {
    const getAdminServices = async () => {
      let AuthStr = `Bearer ${token}`;
      const headers = {
        Authorization: AuthStr,
        Accept: 'application/json',
      };
      Api.post('/admin/service', {}, {headers})
        .then((res) => {
          let {services} = res.data;
          let serviceModified = [];
          services.map((service) => {
            serviceModified.push({
              id: service.id,
              name: service.service_name,
              img: DOMAIN_URL + service.images_show[0]?.image,
            });
          });
          console.log('admin', serviceModified);
          setAdminServices(serviceModified);
        })
        .catch((err) => console.log('err', err));
    };

    const getMyServices = async () => {
      let AuthStr = `Bearer ${token}`;
      const headers = {
        Authorization: AuthStr,
        Accept: 'application/json',
      };
      Api.post('/vendor/service', {}, {headers})
        .then((res) => {
          let {services} = res.data;
          let serviceModified = [];
          services.map((service) => {
            serviceModified.push({
              id: service.id,
              name: service.service_name,
              img: DOMAIN_URL + service.images_show[0]?.image,
            });
          });
          console.log('mine', serviceModified);
          setMyServices(serviceModified);
          setSelectedService(serviceModified); // for checkbox
        })
        .catch((err) => console.log('err', err));
    };

    Promise.all([getMyServices(), getAdminServices()]).then(() => {

      let allServices = [...myServices, ...adminServices]; // log empty!
      let uniq = [...new Set(allServices)];
      console.log(myServices);
      console.log('filtered', uniq);
      console.log('here i want to filter the data', allServices);
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);


UI

<FlatList
       data={allService}
       keyExtractor={(item, index) => String(index)}
       renderItem={renderMyServices}
   />

const[myServices，setMyServices]=useState（[]）；
const[adminServices，setAdminServices]=useState（[]）；
const[allService，setAllService]=useState（[]）；
useffect（（）=>{
const getAdminServices=async（）=>{
让AuthStr=`Bearer${token}`；
常量头={
授权：AuthStr，
接受：'application/json'，
};
post（'/admin/service'，{}，{headers}）
。然后（（res）=>{
设{services}=res.data；
让serviceModified=[]；
services.map（（服务）=>{
服务推送({
id:service.id，
名称：service.service\u名称，
img:DOMAIN\u URL+服务。图像显示[0]？。图像，
});
});
console.log（'admin'，serviceModified）；
setAdminServices（serviceModified）；
})
.catch（（err）=>console.log（'err'，err））；
};
const getMyServices=async（）=>{
让AuthStr=`Bearer${token}`；
常量头={
授权：AuthStr，
接受：'application/json'，
};
post（'/vendor/service'，{}，{headers}）
。然后（（res）=>{
设{services}=res.data；
让serviceModified=[]；
services.map（（服务）=>{
服务推送({
id:service.id，
名称：service.service\u名称，
img:DOMAIN\u URL+服务。图像显示[0]？。图像，
});
});
console.log（'mine'，serviceModified）；
setMyServices（serviceModified）；
setSelectedService（serviceModified）；//用于复选框
})
.catch（（err）=>console.log（'err'，err））；
};
所有（[getMyServices（），getAdminServices（）]）。然后（（）=>{
让allServices=[…myServices，…adminServices]；//日志为空！
让uniq=[…新集合（所有服务）]；
console.log（myServices）；
console.log（'filtered'，uniq）；
log（'这里我想过滤数据'，allServices）；
});
//eslint禁用下一行react HOOK/deps
}, []);
用户界面
字符串（索引）}
renderItem={renderMyServices}
/>

我认为你使用了

承诺。所有这些都是错误的

理想情况下，
承诺。只有在所有函数返回承诺时，all
才可以等待，但在您的情况下，您返回的是
未定义的

因此，甚至在API调用响应之前，
承诺。所有
都将完成执行，
然后
也将执行

您可以将代码重新构造为如下所示，
（尽管如此，我还是看到了很多重构的空间）


const[myServices，setMyServices]=useState（[]）；
const[adminServices，setAdminServices]=useState（[]）；
const[allService，setAllService]=useState（[]）；
useffect（（）=>{
const getAdminServices=async（）=>{
让AuthStr=`Bearer${token}`；
常量头={
授权：AuthStr，
接受：'application/json'，
};
返回Api.post（'/admin/service'，{}，{headers}）；
};
const setMyServices=（res）=>{
设{services}=res.data；
让serviceModified=[]；
services.map（（服务）=>{
服务推送({
id:service.id，
名称：service.service\u名称，
img:DOMAIN\u URL+服务。图像显示[0]？。图像，
});
});
console.log（'mine'，serviceModified）；
setMyServices（serviceModified）；
setSelectedService（serviceModified）；//用于复选框
退货服务修改；
}
const setAdminServices=（res）=>{
设{services}=res.data；
让serviceModified=[]；
services.map（（服务）=>{
服务推送({
id:service.id，
名称：service.service\u名称，
img:DOMAIN\u URL+服务。图像显示[0]？。图像，
});
});
console.log（'admin'，serviceModified）；
setAdminServices（serviceModified）；
退货服务修改；
}  
const getMyServices=async（）=>{
让AuthStr=`Bearer${token}`；
常量头={
授权：AuthStr，
接受：'application/json'，
};
返回Api.post（'/vendor/service'，{}，{headers}）；
};
Promise.all（[getMyServices（），getAdminServices（）]）。然后（（数据）=>{
console.log（数据）；//将具有[myServiceResponse，AdminServiceResponse]；
const myServices=setMyServices（数据[0]）；
const adminServices=setAdminServices（数据[1]）；
让allServices=[…myServices，…adminServices]；//日志为空！
//集合不能以这种方式工作，请使用“lodash”中的“uniq”实用函数，或者根据需要开发自定义函数。
让uniq=[…新集合（所有服务）]；
console.log（myServices）；
console.log（'filtered'，uniq）；
log（'这里我想过滤数据'，allServices）；
});
//eslint禁用下一行react HOOK/deps
}, []);
我认为你使用了
承诺。所有这些都是错误的

理想情况下，
承诺。只有在所有函数返回承诺时，all
才可以等待，但在您的情况下，您返回的是
未定义的

因此，甚至在API调用响应之前，
承诺。所有
都将完成执行和

  const [myServices, setMyServices] = useState([]);
  const [adminServices, setAdminServices] = useState([]);
  const [allService, setAllService] = useState([]);

  useEffect(() => {
    const getAdminServices = async () => {
      let AuthStr = `Bearer ${token}`;
      const headers = {
        Authorization: AuthStr,
        Accept: 'application/json',
      };
      Api.post('/admin/service', {}, {headers})
        .then((res) => {
          let {services} = res.data;
          let serviceModified = [];
          services.map((service) => {
            serviceModified.push({
              id: service.id,
              name: service.service_name,
              img: DOMAIN_URL + service.images_show[0]?.image,
            });
          });
          console.log('admin', serviceModified);
          setAdminServices(serviceModified);
        })
        .catch((err) => console.log('err', err));
    };

    const getMyServices = async () => {
      let AuthStr = `Bearer ${token}`;
      const headers = {
        Authorization: AuthStr,
        Accept: 'application/json',
      };
      Api.post('/vendor/service', {}, {headers})
        .then((res) => {
          let {services} = res.data;
          let serviceModified = [];
          services.map((service) => {
            serviceModified.push({
              id: service.id,
              name: service.service_name,
              img: DOMAIN_URL + service.images_show[0]?.image,
            });
          });
          console.log('mine', serviceModified);
          setMyServices(serviceModified);
          setSelectedService(serviceModified); // for checkbox
        })
        .catch((err) => console.log('err', err));
    };

    Promise.all([getMyServices(), getAdminServices()]).then(() => {

      let allServices = [...myServices, ...adminServices]; // log empty!
      let uniq = [...new Set(allServices)];
      console.log(myServices);
      console.log('filtered', uniq);
      console.log('here i want to filter the data', allServices);
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);


UI

<FlatList
       data={allService}
       keyExtractor={(item, index) => String(index)}
       renderItem={renderMyServices}
   />