writing a function with callback in reactjs

Question

reference-url: https://fullcalendar.io/docs/events-function

The below is a way to provide events as a function to to the FullCalendar. How would I write this in a react functional component, I fetch the data using graphql, which is a bit different.

 function(info, successCallback, failureCallback) {
    req.get('myxmlfeed.php')
      .type('xml')
      .query({
        start: info.start.valueOf(),
        end: info.end.valueOf()
      })
      .end(function(err, res) {

        if (err) {
          failureCallback(err);
        } else {

          successCallback(
            Array.prototype.slice.call( // convert to array
              res.getElementsByTagName('event')
            ).map(function(eventEl) {
              return {
                title: eventEl.getAttribute('title'),
                start: eventEl.getAttribute('start')
              }
            })
          )
        }
      })

and here's my current function, it returns a simple array.. how would I implement the callback and callback fail as they mentioned in the documents.

const fetchData = async () => {
    const { searchEvents: myEvents } = await searchEvents()
    try {
      const data = myEvents.content.forEach((x) => {
        x.start = new Date(x.start)
        x.end = new Date(x.end)
      })
      setIsPageLoaded(true)
      calendarRef.current.getApi().addEventSource(data)
      return clonedata
    } catch (err) {
      console.log(err)
    }
    return true
  }

FWIW, forEach doesn't return a value, so data will be undefined. The documentation says: "It is the event function’s responsibility to make sure successCallback is being called with an array of parsable Event Objects." How does fetchData relate to the first function? Can you provide a more complete example that shows your fetchData and the fullcalendar API interact with each other? — Felix Kling
– Felix Kling, Commented Oct 4, 2021 at 14:29

Mulan · Accepted Answer · 2021-10-05 15:53:58Z

I would recommend writing a simple fetchFeed function that only takes care of fetching the data. Using promises, you can avoid the many drawbacks of callback-oriented designs -

function fetchFeed (start, end) {
  return new Promise((success, failure) => {
    req
      .get("myxmlfeed.php")
      .type("xml")
      .query({ start, end })
      .end((err, res) => {
        if (err)
          failure(err)
        else
          success(res)
      })
  })
}

Now we can call fetchFeed with some startDate and some endDate. The positive result can be processed in .then(...) and any error can be addressed in .catch(...) -

fetchFeed(startDate, endDate)
  .then(res => {
    // ...
  })
  .catch(err => {
    console.log(err)
  })

Promises received additional support with async and await syntax that makes writing this kind of program even more natural -

async function updateFeed (...) {
  const res = await fetchFeed(startDate, endDate)
  for (const e of res.getElementsByTagName("event")) {
    // ...
  }
}

updateFeed(...).then(console.log).catch(console.error)

Collectives™ on Stack Overflow

writing a function with callback in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related