如何在 React Hooks 中将两个 state 合并到单个 state 中？

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合并两个 state 值我得到一个状态值，但无法获得下一个 state 值，因为我尝试使用扩展运算符但仍然无法解决问题。以下是我的代码：请帮助解决：

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>
)
  }

以下是我的 output：

在上面的 output 中，我试图在单个 state 测试中保留两个 state 数据和区域值，但是当代码运行时，我无法保留以前的值，而不是使用 iiusvo 传播之前的值。 ，我该如何解决这个问题？请帮忙。

Answer 1

Promise.all()是处理多个互不依赖的请求的更好选择。

考虑仅在两个请求都完成时才将loading设置为false 。

此外，state 可以这样简化：

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>
  );
}

Answer 2

我建议在 2 个useEffect挂钩中执行此操作：

1. 第一个将运行一次，并将数据获取到您的districts和data状态。
2. 第二个将在依赖数组中包含districts和data ，因此每次data或districts发生变化时都会运行。

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>
    );
}

Answer 3

来自 Axios 文档“执行多个并发请求”

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];
  });

Answer 4

我想你可以让这两个 http 请求 asycn 这样，然后你可以改变变量 test state 一次，像这样：

//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])
    }