当promise.all解决时，如何在两种不同状态下过滤数据？

如何解决当promise.all解决时，如何在两种不同状态下过滤数据？

我发送了两个获取请求的请求

1-我的服务 2-管理员服务

收到响应后，我将状态设置为“ myService，管理员”。

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

所以我正尝试使用new Set，但无法正常工作，也许我错过了一些事情

另一个问题是我使用Promise.all等待两个请求，但是当我在那登录状态时，我得到了初始状态“空”

“我的服务和管理员”数据样本

[
//my service
  {
    "id": 1,"img": ".....","name": "service 1"
  },{
    "id": 2,"name": "service 2"
  },{
    "id": 3,"name": "service 3"
  },//admin service
  {
    "id": 1,]

代码段

  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,};
      Api.post('/vendor/service',});
          });
          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}
   />

解决方法

我认为您错误地使用了promises.all。

理想情况下，promises.all仅在所有函数都返回了您的承诺后才可以等待，但是在您的情况下，您正在返回undefined。

因此，甚至在API调用响应之前，Promises.all将完成执行，并且then也将被执行。

您可以将代码重新组织为如下所示， （仍然，我看到了很多重构空间）。

  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',};
      return Api.post('/admin/service',{},{headers});
    };

    const setMyServices = (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
       return serviceModified;
    }
    
    const setAdminServices = (res) => {
       let {services} = res.data;
       let serviceModified = [];
       services.map((service) => {
            serviceModified.push({
              id: service.id,});
          });
          console.log('admin',serviceModified);
          setAdminServices(serviceModified);
       return serviceModified;
     }  


    const getMyServices = async () => {
      let AuthStr = `Bearer ${token}`;
      const headers = {
        Authorization: AuthStr,};
      return Api.post('/vendor/service',{headers});
    };

    Promise.all([getMyServices(),getAdminServices()]).then((data) => {
      console.log(data); // will have [myServiceResponse,adminServiceReponse];
      const myServices = setMyServices(data[0]);
      const adminServices = setAdminServices(data[1]);
      let allServices = [...myServices,...adminServices]; // log empty!
      // set doesn't work this way,use `uniq` utility function from `lodash` or develop a custom one if required.
      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
  },[]);

,

首先，您应该退还getMyServices和getAdminServices的承诺。

此外，react中的设置状态是异步的。因此，对myServices和adminServices的更新不能保证在您尝试使用它们时得到反映。我建议您从诺言中返回结果，并使用这些值代替状态。

示例：

  const [myServices,setAllService] = useState([]);

  useEffect(() => {
    const getAdminServices = () => {
      let AuthStr = `Bearer ${token}`;
      const headers = {
        Authorization: AuthStr,{headers})
        .then((res) => {
          let {services} = res.data;
          let serviceModified = [];
          services.map((service) => {
            serviceModified.push({
              id: service.id,serviceModified);
          return serviceModified;
        })
        .catch((err) => console.log('err',err));
    };

    const getMyServices = () => {
      let AuthStr = `Bearer ${token}`;
      const headers = {
        Authorization: AuthStr,});
          });
          console.log('mine',err));
    };

    Promise.all([getMyServices(),getAdminServices()]).then(([myServices,adminServices]) => {
      // set state and do stuff
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  },[]);