0

我发送两个请求以获取

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

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

现在包含我的服务的管理服务。所以我想过滤我的管理服务中的服务是否从阵列中删除管理服务。

所以我正在尝试使用new Set但不起作用也许我错过了一些东西

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

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

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

  {
    "id": 3,
    "img": ".....",
    "name": "service 3"
  },
//admin service
  {
    "id": 1,
    "img": ".....",
    "name": "service 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,
        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}
   />
4

2 回答 2

1

首先，您应该从getMyServicesand返回承诺getAdminServices。

此外，在反应中设置状态是异步的。因此，更新myServices并adminServices不能保证在您尝试使用它们时反映出来。我建议您从承诺中返回结果并使用这些值而不是状态。

例子：

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

  useEffect(() => {
    const getAdminServices = () => {
      let AuthStr = `Bearer ${token}`;
      const headers = {
        Authorization: AuthStr,
        Accept: 'application/json',
      };
      return 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);
          return serviceModified;
        })
        .catch((err) => console.log('err', err));
    };

    const getMyServices = () => {
      let AuthStr = `Bearer ${token}`;
      const headers = {
        Authorization: AuthStr,
        Accept: 'application/json',
      };
      return 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);
          return serviceModified;
        })
        .catch((err) => console.log('err', err));
    };

    Promise.all([getMyServices(), getAdminServices()]).then(([myServices, adminServices]) => {
      // set state and do stuff
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
于 2020-09-26T19:57:27.630 回答
1

我认为您使用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,
              name: service.service_name,
              img: DOMAIN_URL + service.images_show[0]?.image,
            });
          });
          console.log('admin', serviceModified);
          setAdminServices(serviceModified);
       return serviceModified;
     }  


    const getMyServices = async () => {
      let AuthStr = `Bearer ${token}`;
      const headers = {
        Authorization: AuthStr,
        Accept: 'application/json',
      };
      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
  }, []);
于 2020-09-26T19:53:40.263 回答