The issue of linking .then() functions

Question

The issue of linking .then() functions

I've been struggling to grasp the concept of Promises/then-ables for a while now. Currently, I am working with NextJS.

My goal is to chain together the following steps:

Retrieve data from an API
Save the data
Modify the data to create a component (without causing an infinite loop)

I'm facing difficulty in obtaining the correct data for step #3. Despite trying different approaches, I seem to be stuck at this stage.

For this purpose, I am utilizing the useEffect hook, although I acknowledge there might be alternative methods available as well: https://nextjs.org/docs/basic-features/data-fetching/client-side

export default function Survey() {
  const [dataDB, setDataDB] = useState('');
  let roles;

  function createCards(rolesArr) {

    let role1 = tabs.find(x => x.id == rolesArr[0])
    let role2 = tabs.find(x => x.id == rolesArr[1])
    let role3 = tabs.find(x => x.id == rolesArr[2])

    // the above is null
    // the below is also null:
    //     let role1 = tabs.find(x => x.id == dataDB[0])

    roles.push(role1)
    roles.push(role2); 
    roles.push(role3); // component will map over these 3
  }

  useEffect(() => {
    fetch('example.com/api')
      .then((response) => response.json()) // 1. Retrieves an array like [0, 3, 5]
      .then((data) => {
        setData(dataDB) // 2. Utilizing hook to setData, data will be stored in the database later
      }
     .then((rolesArr) => createCards(rolesArr)) // 3. Modifying data for the component
    })
  )  

  return ( 
    { 
      roles.map((path) => (
        <Card key={path.id}>
          <Text>{path.title}</Text>
        </Card>
      ))
    } 
  )
}

javascript next.js promise

Answer 1

Answer №1

You seem to be facing quite a few issues.

Undefined Roles

let roles; initializes a variable with the value of undefined.

When you try to use it as an array later on, such as in roles.map((path) => ( you will encounter an error.

To resolve this, ensure you define it as an array from the start.

A Tiny Typo

.then((data) => {
        setData(dataDB) // 2. Using hook to setData, will store in database later
      }

You are missing a closing parenthesis at the end there.

Undefined rolesArr

The value returned by:

.then((data) => {
        setData(dataDB) // 2. Using hook to setData, will store in database later
      }

… is undefined because there is no explicit return statement. Therefore, subsequent then() callbacks will receive undefined.

There's no need for an additional promise creation here since what you want can be done within the existing function.

  .then((data) => {
    setData(dataDB);
    createCards(dataDB);
  });

Creating Cards Issue

 roles.push(role1)
 roles.push(role2); 
 roles.push(role3); // component will map over these 3

You face a similar problem here with roles being undefined and not an array.

Moreover, because createCards is executed asynchronously, this code runs after roles.map((path) => (, rendering the changes ineffective.

Instead of mutating a non-existent array, create a new one and store it in state. State updates trigger re-renders, enabling the component to access and iterate over the array.

A typical solution involves:

const [roles, setRoles] = useState(null);

function createCards(rolesArr) {
    // etc
    setRoles([role1, role2, role3]);
}

// etc

if (roles === null) {
    return <p>Loading</p>;
}

return roles.map(etc etc);

Answer 2

You seem to be facing quite a few issues.

Undefined Roles

let roles; initializes a variable with the value of undefined.

When you try to use it as an array later on, such as in roles.map((path) => ( you will encounter an error.

To resolve this, ensure you define it as an array from the start.

A Tiny Typo

.then((data) => {
        setData(dataDB) // 2. Using hook to setData, will store in database later
      }

You are missing a closing parenthesis at the end there.

Undefined rolesArr

The value returned by:

.then((data) => {
        setData(dataDB) // 2. Using hook to setData, will store in database later
      }

… is undefined because there is no explicit return statement. Therefore, subsequent then() callbacks will receive undefined.

There's no need for an additional promise creation here since what you want can be done within the existing function.

  .then((data) => {
    setData(dataDB);
    createCards(dataDB);
  });

Creating Cards Issue

 roles.push(role1)
 roles.push(role2); 
 roles.push(role3); // component will map over these 3

You face a similar problem here with roles being undefined and not an array.

Moreover, because createCards is executed asynchronously, this code runs after roles.map((path) => (, rendering the changes ineffective.

Instead of mutating a non-existent array, create a new one and store it in state. State updates trigger re-renders, enabling the component to access and iterate over the array.

A typical solution involves:

const [roles, setRoles] = useState(null);

function createCards(rolesArr) {
    // etc
    setRoles([role1, role2, role3]);
}

// etc

if (roles === null) {
    return <p>Loading</p>;
}

return roles.map(etc etc);

Answer 3

Answer №2

When working with the .then() method, it is important to ensure that you return the output from the previous callback function in order to chain multiple .then() calls together. Here's a quick example:

fetchData()
  .then((response) => {
    console.log(response.json())
    return response.json()
  }).then((values) => {
    console.log(values)
    return values.filter((value) => value > 0)
  }).then((positiveValues) => {
    console.log(positiveValues)
    return positiveValues;
  })

In this scenario, the response.json() is printed and then passed on as a value for the subsequent .then() callback to utilize.

To adapt this for your situation, make sure to return the desired value within the second callback like so:

fetch('example.com/api')
      .then((response) => response.json()) // 1. Retrieves an array such as [0, 3, 5]
      .then((data) => {
        setData(dataDB) // 2. Utilizing hook to store data in database at a later point
        return dataDB;
      }).then((rolesArr) => createCards(rolesArr)) // 3. Adjusting data for component usage
    })

Answer 4

When working with the .then() method, it is important to ensure that you return the output from the previous callback function in order to chain multiple .then() calls together. Here's a quick example:

fetchData()
  .then((response) => {
    console.log(response.json())
    return response.json()
  }).then((values) => {
    console.log(values)
    return values.filter((value) => value > 0)
  }).then((positiveValues) => {
    console.log(positiveValues)
    return positiveValues;
  })

In this scenario, the response.json() is printed and then passed on as a value for the subsequent .then() callback to utilize.

To adapt this for your situation, make sure to return the desired value within the second callback like so:

fetch('example.com/api')
      .then((response) => response.json()) // 1. Retrieves an array such as [0, 3, 5]
      .then((data) => {
        setData(dataDB) // 2. Utilizing hook to store data in database at a later point
        return dataDB;
      }).then((rolesArr) => createCards(rolesArr)) // 3. Adjusting data for component usage
    })

The issue of linking .then() functions

Answer №1

Undefined Roles

A Tiny Typo

Undefined rolesArr

Creating Cards Issue

Answer №2

Similar questions

Unable to sign out user from the server side using Next.js and Supabase

Click the navigation bar to toggle it on and off

angular: the world of guarantees and assistance

Executing an asynchronous action without linking promises to subsequent actions

The issue of the fixed navbar overlapping the scrollbar of the page occurs when utilizing the overflow-y scroll feature

Unable to allocate a second item to an existing one

Combining two HTML tables using jQuery/JavaScript

Using Facebook authentication in React Native

expanding the expressjs res feature

Troubleshooting React and NodeJs Fetch Problem

Processing JSON in PHP after an AJAX POST request

What is the best way to change the date format from "yyyy-MM-dd" in a JavaScript file to "dd/MM/yyyy" and "MM/dd/yyyy" formats in an HTML file?

Button cannot be activated upon selecting a row

Can you provide a guide on how to retrieve an HTML file using JSON?

What is the best way to confirm checkbox selection based on MySQL data?

Send all visitors from a subdomain to NextJS

The Angular ViewportScroller feature appears to be malfunctioning in the latest release of Angular,

Identifying an Android device using Javascript or jQuery

Error: Webpack encountering reference errors when handling multiple entry points

Whenever signing in with Next Auth, the response consistently exhibits the values of "ok" being false and "status" being 302, even