时间戳

首页 > 解决方案 > 如何在 React Hooks 中将两个状态合并为单个状态？

javascript - 如何在 React Hooks 中将两个状态合并为单个状态？

问题描述

我想合并两个名为 Data 和 District 值的状态并创建一个名为 test 的单个状态。因为我从不同的 API 获取两个状态值。我无法使单个状态合并以下状态的数据，我尝试了但是当我尝试合并两个状态值我得到一个状态值但无法获得下一个状态值，因为我尝试使用扩展运算符但仍然无法解决问题。以下是我的代码：请帮助解决：

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

以下是我的输出： 在此处输入图像描述

在上面的输出中，我尝试在单个状态测试中保留数据和区域的两个状态值，但是当代码运行时，当我使用扩展运算符保留以前的值时，我无法使用以前的值获取更新值。仍然没有保留以前的值，我该如何解决这个问题？请帮忙。

标签： javascriptarraysreactjsrxjsfrontend

解决方案

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

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

此外，状态可以这样简化：

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

推荐阅读