分配条件类型的接口以通过路径名接收多个api数据

【问题标题】：Assign Conditional type of interface to receive multiple api data by path-name分配条件类型的接口以通过路径名接收多个api数据
【发布时间】：2021-08-14 14:17:36
【问题描述】：

我们如何通过遵循路径名在 ReactJs 打字稿中分配条件类型。例如，如果路径名 A 然后 interface Orders[] 如果路径名 B 然后 setState 带有 Locations 接口，因此我们可以管理具有多种类型数据的一个状态。

const [tableArray, settableArray] = useState < SingleOrder[] | LocationInterface[] | undefined | any > ();

useEffect(() => {
  setLoading(true);
  if (pathname === '/bmv_location_list' && locationList) {
    settableArray(locationList);
    return setLoading(false);
  } else if (pathname === '/orders') {
    settableArray(fetchOrdersListData);
    return setLoading(false);
  } else if (pathname === '/new-orders') {
    settableArray(newOrders);
    return setLoading(false);
  }
}, [fetchOrdersListData, locationList, newOrders, pathname]);

【问题讨论】：

标签： reactjs react-typescript

【解决方案1】：

您正在寻找的是一个名为 React Router 的库。您可以像这样导入useLocation 钩子：

import { useLocation } from 'react-router-dom'

然后，您可以通过将其分配给变量来对其进行初始化：

const location=useLocation()

现在你应该可以在 useEffect 挂钩中使用它了

【讨论】：

我已经尝试使用 useLocation 钩子并且工作良好问题是当我们在状态中设置一个 api 数据并分配 api 响应的通用类型然后它工作但是当我们尝试第二个 api 并设置响应数据时在相同的状态下，这将显示错误我们无法分配第二个 api 响应，因为我们正在接收第一个 api 接收
@Asad 我认为这是因为 set 函数是异步的。确保第二个 set 函数在第一个带有箭头函数的函数之后运行，例如 prevValue =>setvalue(presentValue)