如何在 React JS 中为处于使用状态的对象数组创建接口

Question

我用AXIOS向服务器发起请求，然后服务器返回值如下：

我想将它保存在状态中，这里我使用反应钩子，当我想用数据设置状态时，如图所示，我得到错误：

Argument of type '() => IterableIterator<IMahasiswa>' is not assignable to parameter of type 'SetStateAction<undefined>'.
  Type 'IterableIterator<IMahasiswa>' is not assignable to type 'undefined'.ts(2345)

这是我的代码：

和我的界面：

如何为setMahasiswa设置接口我已经试过<IMahasiswa[]>但是它给出了同样的错误，除了在res.values部分它被替换为res 成功返回，但是用map循环会报错

Answer 1

我的假设是您的 axios.get(url[, config]) returns 默认为 any 类型。因此，您的 data 也有 any 类型，除非您将其转换为 IMahasiswa[].

但是，我建议的解决方案是在 axios.get 处定义类型，这是他们的 typedef 的大纲。

export interface AxiosInstance {
  //...
  get<T = any, R = AxiosResponse<T>>(url: string, config?: AxiosRequestConfig): Promise<R>;
  //...
}

因此，您可以这样做；

await axiosClient.get<IMahasiswa[]>("asd/asd", {});

这是完整的代码示例；

interface IMahasiswa {
  name: string;
  age: number;
}

const useTest = () => ({
  async fetch(): Promise<IMahasiswa[]> {
    const { data } = await axiosClient.get<IMahasiswa[]>("asd/asd", {});
    return data; // data here has the type of IMahasiswa[]
  },
});

const axiosClient = axios.create({
  baseURL: "http://localhost:1231",
});

const TestComp = () => {
  const [mahasiswa, setMahasiswa] = React.useState<IMahasiswa[]>([]);
  const testFn = useTest();

  useEffect(() => {
    testFn.fetch().then((res) => {
      setMahasiswa(res);
    });
  }, []);

  return <div>asd</div>;
};

如何在 React JS 中为处于使用状态的对象数组创建接口

How to create interface for array of objects in usestate in react js

reactjs

typescript

react-typescript

tsx