typescript 按日期对请求响应进行排序，然后使用它设置状态

knpiaxh1 于 2023-01-02 发布在 TypeScript

关注(0)|答案(3)|浏览(144)

我目前有这个功能：

const fetchJobs = async (userId: string) => {
        setJobs([])

        await axios.post("/api/fetch/fetchMany?type=jobs", {
            user_id: userId
        })
        .then((response) => {
            if (response == null || response.data.length === 0) {
                setJobs([])
            } else {
                const sortedJobs = response.data.sort = (a: Date, b: Date): Job[] => {
                    return new Date(a.startDate) - new Date(b.startDate)
                }
                setJobs(sortedJobs)
            } 
        })
    }

它所做的是获取一个“作业”对象列表，然后尝试将它们从最新到最旧排序，然后将它们放入作业状态中。
但是，有两个问题：
1.排序函数中的类型“Date "上不存在”startDate“
1.无法将函数赋给类型为“SetStateAction〈Job[]〉”的参数
对于某些上下文，下面是我的Job类型，它是一个对象数组：

export type Job = {
    _id: string,
    user_id: string, 
    jobTitle: string, 
    employer: string,
    responsibilities: string[], 
    startDate: string | Date,
    endDate: string
}

下面是我的状态类型：

const [jobs, setJobs] = useState<Job[]>([])

我想我需要改变我的状态可以被设置为什么，但是我不明白为什么我不能使用函数来设置状态，因为它返回一个作业类型数组。
任何帮助都将不胜感激

typescript

来源：https://stackoverflow.com/questions/74981044/sorting-request-response-by-date-and-then-setting-state-with-it

3条答案

按热度按时间

4bbkushb1#

键入axios请求await axios.post<Job[]>(...)，以便相应地自动键入response.data。
Array#sort()是一个方法，而不是属性。它需要一个回调函数，该回调函数从数组中接收两个值（在您的示例中，这两个值的类型是Job，而不是Date），并根据它们的顺序返回一个有符号的数字。不是布尔值。
response.data.sort((a, b) => new Date(a.startDate) - new Date(b.startDate))
不要将async/await与.then()混用
所以总的来说

const fetchJobs = async (userId: string) => {
  setJobs([])

  const response = await axios.post<Job[]>("/api/fetch/fetchMany?type=jobs", {
    user_id: userId
  });

  if (!response || response.data.length === 0) {
    // setJobs([]) // you've already done that
    return;
  }

  const sortedJobs = response.data.sort((a, b) => new Date(a.startDate) - new Date(b.startDate));

  setJobs(sortedJobs);
}

赞(0）回复(0）举报 2023-01-02

krcsximq2#

在处理`network tasks`时使用`async/await`或`Promise`

const fetchJobs = async (userId: string) => {
  setJobs([])  // 👈 Initailly set to null

  const response = await axios.post<Job[]>("/api/fetch/fetchMany?type=jobs", {
    user_id: userId
  });

  if (!response || response.data.length === 0) {
    return;    //👈 return here instead of using if/else
  }

  // 👇 Change the sort method by specifying the types
  const sortedJobs = response.data.sort((a: Job, b: Job): number => new Date(a.startDate) - new Date(b.startDate));

  setJobs(sortedJobs); // 👈 set the sorted Jobs here
}

赞(0）回复(0）举报 2023-01-02

fkaflof63#

对于首次发布：
排序函数中的类型"Date"上不存在"startDate"
您可以更改排序参数的类型

const sortedJobs = response.data.sort = (a: Date, b: Date): Job[] => {
  return new Date(a.startDate) - new Date(b.startDate)
}

到

const sortedJobs = response.data.sort((a: Job, b: Job): number => {
  return new Date(a.startDate).getTime() - new Date(b.startDate).getTime()
})

请告诉我它是否修复了第二个问题，因为我找不到以下问题：
无法将函数赋给类型为"SetStateAction〈Job []〉"的参数
但是该改变可以修复两者。

赞(0）回复(0）举报 2023-01-02

我来回答

typescript 按日期对请求响应进行排序，然后使用它设置状态

3条答案

在处理`network tasks`时使用`async/await`或`Promise`

相关问题

热门标签

最新问答

typescript 按日期对请求响应进行排序，然后使用它设置状态

3条答案

在处理network tasks时使用async/await或Promise

相关问题

热门标签

最新问答

在处理`network tasks`时使用`async/await`或`Promise`