React新手技术问询：跨useEffect共享状态并解决TypeScript类型报错问题

我来帮你一步步搞定这个问题，先拆解下当前遇到的两个核心问题：

1. 类型错误的根源 #

你看到的Property 'driverName' does not exist on type...错误，核心原因是第二个useEffect里的res是数组类型（CaDto[]），但你直接把它当成单个对象去访问driverName属性了——数组本身当然没有这个字段，只有数组里的每个元素才有！

另外，你在then回调里给res指定的类型也不对：React.SetStateAction是给setState函数用的类型，不是API返回值的类型，应该直接用User和CaDto[]。

2. 逻辑实现的修正点 #

• 第二个useEffect没有依赖driver，导致当第一个useEffect获取到driver后，它不会重新执行，永远拿不到最新的name值。
• 你的需求是判断数组中是否存在匹配的driverName，而不是拿整个数组和单个name比较，需要用数组的some()方法来做判断。

修正后的完整代码 #

// 先确保你的CaDto接口正确定义了driverName字段
interface CaDto {
  billingName: string;
  driverName: string;
  // 其他字段...
}

interface User {
  id: string;
  isAdmin: boolean;
  name: string;
}

const [driver, setDriver] = useState<User>();
const [orders, setOrders] = useState<CaDto[]>([]);
const [renderedData, setRenderedData] = useState<CaDto[]>([]);

useEffect(() => {
  api.userApi
    .apiUserGet()
    // 这里res的类型是User，不是SetStateAction
    .then((res: User) => {
      console.log(res);
      setDriver(res);
    });
}, [api.userApi]);

useEffect(() => {
  // 如果driver还没获取到，直接返回，避免无效请求
  if (!driver) return;

  api.caApi
    .apiCaGet(request)
    // res的类型是CaDto[]
    .then((res: CaDto[]) => {
      // 判断数组中是否有元素的driverName和当前driver.name匹配
      const hasMatchingDriver = res.some(item => item.driverName === driver.name);
      
      if (hasMatchingDriver) {
        setOrders(res);
        setRenderedData(res);
        console.log(res);
      }
    });
}, [api.caApi, driver]); // 添加driver作为依赖，确保driver更新后重新执行

额外说明 #

• 如果你的CaDto接口是自动生成的（比如从OpenAPI），但没有包含driverName，那你需要检查API文档或者调整生成配置，确保字段被正确定义。
• 如果你想只保留匹配driverName的数组元素（而不是只要有匹配就保留整个数组），可以把some()换成filter()：

  const matchedOrders = res.filter(item => item.driverName === driver.name);
  if (matchedOrders.length > 0) {
    setOrders(matchedOrders);
    setRenderedData(matchedOrders);
  }
  

内容的提问来源于stack exchange，提问作者user10727653