时间戳

首页 > 解决方案 > 将过滤后的对象从父组件异步传递给子组件

reactjs - 将过滤后的对象从父组件异步传递给子组件

问题描述

在下面的代码片段中，我遇到了以下问题。

console.log(uniques)正在正确返回所有过滤后的事件，所以接下来我要让return uniques它们在我的父组件中可用。

但是，当尝试访问events我的父组件中的 时，它们会返回undefined. 所以console.log(eventsFiltered)在父是undefined。我的猜测是在我的子组件中我应该return uniques以更多asynchronous方式？但我不知道如何正确编写它。

如果有人可以调查它，我将非常感激

// Childcomponent    
export const filterDateRange = async (dateRange) => {
  const startDate = new Date(dateRange.startDate).getTime()
  const endDate = new Date(dateRange.endDate).getTime()
  let newArray = []

  return axios
    .get(`fetchAllEventsHere`)
    .then((res) => {
      res.data.events.map((item) => {
        item.dates.map((date) => {
          const evtDate = new Date(date).getTime()
          if (evtDate >= startDate && evtDate <= endDate) {
            newArray.push(item)
            let uniques = [...new Set(newArray)]
            console.log(uniques) // This returns the event objects as expected
            return uniques
          }
        })
      })
    })
    .catch((err) => {
      return err
    })
}


 // Parentcomponent
 useEffect(async () => {
    if (dateRange?.startDate && dateRange?.endDate) {
      const eventsFiltered = await filterDateRange(dateRange)
      console.log(eventsFiltered) // trying to access the events here results in undefined
      setEventsFiltered(eventsFiltered)
    }
 }, [dateRange])

提前致谢 ！

标签： reactjsasync-awaitaxios

解决方案

您不能将 useEffect 的回调函数设置为异步，因为这不起作用。尝试定义另一个异步函数并调用 api，然后在 useEffect 中调用该函数。

编辑：

你这样做了——

 useEffect(async () => {
    if (dateRange?.startDate && dateRange?.endDate) {
      const eventsFiltered = await filterDateRange(dateRange)
      console.log(eventsFiltered) // trying to access the events here results in undefined
      setEventsFiltered(eventsFiltered)
    }
 }, [dateRange])

相当 -

 useEffect(() => {
    (async ()=> await apiCall())()
 }, [dateRange])

const apiCall = async () {
      if (dateRange?.startDate && dateRange?.endDate) {
          const eventsFiltered = await filterDateRange(dateRange)
          console.log(eventsFiltered) // trying to access the events here results in undefined
          setEventsFiltered(eventsFiltered)
    }
}

编辑（2）：

您可以在地图外声明 uniques 变量，也可以在地图外将其返回。

export const filterDateRange = async (dateRange) => {
  const startDate = new Date(dateRange.startDate).getTime()
  const endDate = new Date(dateRange.endDate).getTime()
  let newArray = []

  return axios
    .get(`fetchAllEventsHere`)
    .then((res) => {
      let uniques; // declare here
      res.data.events.map((item) => {
        item.dates.map((date) => {
          const evtDate = new Date(date).getTime()
          if (evtDate >= startDate && evtDate <= endDate) {
            newArray.push(item)
            uniques = [...new Set(newArray)]
            console.log(uniques) // This returns the event objects as expected
          }
        })
      })
     return uniques; // return here
    })
    .catch((err) => {
      return err
    })
}


 // Parentcomponent
  useEffect(() => {
    (async ()=> await apiCall())()
 }, [dateRange])

const apiCall = async () {
      if (dateRange?.startDate && dateRange?.endDate) {
          const eventsFiltered = await filterDateRange(dateRange)
          console.log(eventsFiltered) // trying to access the events here results in undefined
          setEventsFiltered(eventsFiltered)
    }
}

推荐阅读