reactjs - typescript :重新分配类型缩小后的 react 查询useQuery数据不起作用

Question

在react-query中，useQuery结果的数据值为T |未定义。如果我缩小类型，它就会起作用。但是，如果我将它重新分配给不同的变量，类型缩小将停止工作。只有在回调内部引用重新分配的数据时才会发生，看起来像。这里有什么问题？

  const { data } = useQuery<number[]>("test", () => [1, 2, 3, 4]);

  let data2 = data;
  // filtering and sorting data here...

  const fun0 = () => {
    if (!data) return;

    //No error
    [1, 2, 3].map((one) => data[0]);
  };

  const fun = () => {
    if (!data2) return;

    //This works
    const foo = data2[0];

    //Type error here. data2 is still number[] | undefined ???
    [1, 2, 3].map((one) => data2[0]);
  };

你可以看一个例子sandbox (更新:有解决方案)

Answer 1

这里的问题不是重新赋值，而是 data 是 const 而 data2 是 let .这也将重现该问题:

const data = null! as number[] | undefined

let data2 = null! as number[] | undefined

通常，当您使用 let 变量并缩小它们时，此信息在回调内部不可用。毕竟，编译器不知道变量在执行回调之前是否已更改。 const 变量不能被重新赋值，所以理论上该值应该不会改变(如果变量是某种嵌套对象，即使变量声明为 ，您也可以修改嵌套属性>const。但编译器足够聪明，可以区分这些场景。参见 example )

参见 here或更深入的阅读 here .

---

Playground