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

Passing data from a parent component to a child component in Next.JS 13

What is the best way to attach a CSS class using an onclick function?

What is the best way to utilize JSON data stored in a Jekyll _data folder?

What are the steps to reset the Firebase server in order to allow the deployment of functions

The 'xxx' type does not have an index signature, so the element is implicitly assigned an 'any' type

A guide on applying bold formatting to a specific section of text in React

The code is running just fine when tested locally, but it seems to encounter an issue when accessed remotely, yielding

Is it possible to include a base url for imports in React JS?

Instruction failed to produce HTML output

End the streaming process in React Native using React Navigation

Resizing popups upon button activation

What is the best way to send a file to a JavaScript function within Django?

Despite successfully passing props into V-for, the output does not display the props as expected

Transforming the appearance of the menu element in Vue using transitions

Iframe form submissions

The JSON reviver function is still not returning anything even when explicitly using the return

Using NextJS with Storybook: The Issue with Optional Chaining

Transitioning from using a jQuery get request to utilizing Vue.js

The CSS styling for a pie chart does not seem to be functioning properly when using jQuery's

A guide on utilizing webpack devServer proxy within a create react app