How can i merge two state into single state in React Hooks?

Question

I want to merge two state named Data and District value and create a single state named test.Since i am fetching two states value from different API.I cannot make a single state merging the data of the following states,i tried but when i tried to merge two state value a single states value i get but next state value cannot be obtained,since i tried to use spread operator but still cannot solve the issue.Following below are my code:Please help for solution:

import React, { useState, useEffect } from 'react';
 import Axios from 'axios';

export default function Testmap() {
const [Data, setData] = useState([]);//fetched data
const [isLoading, setIsloading] = useState(true);
const [District, setDistrict] = useState([]);
const [test, setTest] = useState({
    data: [],
    districts: []
});





useEffect(() => {
    //fetching data from api 
    Axios.get('https://covid19wst.yilab.org.np/api/v1/form')
        
        .then(res => {
            setData(res.data)
            setTest({ ...test, data: res.data })
            setIsloading(false)

        })
        .catch(err => {
            console.log(err);
        })
    Axios.get('https://bipad.gov.np/api/v1/district/')
        .then(res => {
            setDistrict(res.data.results)
            setTest({ ...test, districts: res.data.results })



            setIsloading(false)

        })
        .catch(err => {
            console.log(err);
        })

}, [])




console.log(isLoading);
console.log("data", Data);
console.log("districts>>", District);
console.log("test>>>", test);

return (
    <div>
        <h2>Hello</h2>
    </div>
)
  }

Following below is my output:

Here in above output i tried to keep two state values of data and districts in a single state test but when the code is run i cannot get update value with previous value when i used spread operator to preserve previous value.Still prevoius value is not preserved,how can i solve the issue?Please help.

Olga · Accepted Answer · 2020-07-03 14:33:46Z

Promise.all() is a better option for handling multiple requests that do not depend on each other.

Consider having loading set to false only when both requests are finished.

Also, the state can be simplified like this:

export default function Testmap() {
  const [isLoading, setIsloading] = useState(false);
  const [test, setTest] = useState({
    data: [],
    districts: [],
  });

  useEffect(() => {
    setIsloading(true);

    Promise.all([
      Axios.get("https://covid19wst.yilab.org.np/api/v1/form"),
      Axios.get("https://bipad.gov.np/api/v1/district/"),
    ])
      .then((results) => {
        setIsloading(false);
        setTest({
          data: results[0].data,
          districts: results[1].data.results
        });
      })
      .catch((err) => {
        setIsloading(false);
        console.log(err);
      });
  }, []);

  return (
    <div>
      <h2>Hello</h2>
    </div>
  );
}

lavor · Accepted Answer · 2020-07-03 14:18:05Z

I suggest to do it in 2 useEffect hooks:

the first one will run once and will fetch data into your districts and data states.
the second one will have districts and data in dependency array, so will run each time whenever data or districts changes.

import React, {useState, useEffect} from 'react';
import Axios from 'axios';

export default function Testmap() {
    const [data, setData] = useState([]);//fetched data
    const [isLoading, setIsloading] = useState(true);
    const [districts, setDistricts] = useState([]);
    const [test, setTest] = useState({
        data: [],
        districts: []
    });

    useEffect(() => {
        //fetching data from api
        Axios.get('https://covid19wst.yilab.org.np/api/v1/form')
            .then(res => {
                setData(res.data);
                setIsloading(false);
            })
            .catch(err => {
                console.log(err);
            });
        Axios.get('https://bipad.gov.np/api/v1/district/')
            .then(res => {
                setDistricts(res.data.results);
                setIsloading(false);
            })
            .catch(err => {
                console.log(err);
            });

    }, []);

    useEffect(() => {
        setTest({...test, data, districts});
    }, [data, districts]);

    return (
        <div>
            <h2>Hello</h2>
        </div>
    );
}

Miroslav Papírník · Accepted Answer · 2020-07-03 14:18:41Z

0

From Axios documentation "Performing multiple concurrent requests"

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

answered Jul 3, 2020 at 14:18

Miroslav Papírník

7775 silver badges17 bronze badges

Comments

Rene Arteaga · Accepted Answer · 2020-07-03 14:29:43Z

I think you can make the both http request asycn so, then you can change the variable test state once, like this:

//fetching data from api 
const fetchDataFromApi = async () => {
    let dataResponse = []
    await Axios.get('https://covid19wst.yilab.org.np/api/v1/form')
        
        .then(res => {
            setData(res.data)
            dataResponse = res.data
            setIsloading(false)

        })
        .catch(err => {
            console.log(err);
        })
    let districtResponse = []
    await Axios.get('https://bipad.gov.np/api/v1/district/')
        .then(res => {
            setDistrict(res.data.results)
            districtResponse = res.data.results
            setIsloading(false)

        })
        .catch(err => {
            console.log(err);
        })

       setTest([...test, ...dataResponse, ...districtResponse])
    }

Collectives™ on Stack Overflow

How can i merge two state into single state in React Hooks?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related