我的数组的长度始终为零，即使它包含元素[重复]答案

【问题标题】：My array's length is always zero even it contains elements [duplicate]我的数组的长度始终为零，即使它包含元素[重复]
【发布时间】：2020-08-04 12:14:57
【问题描述】：

我正在使用 React 开发一个 COVID 跟踪器网络应用程序。我已经根据需要修改了从 api 获取的 JSON 数据。但是当我通过循环进行测试时，它不会显示任何内容。当我尝试将它登录到我的控制台时，它显示数组中的元素为空且未定义。

这是我用来获取数据的代码

const districts = [];
const fetchedData = fetch(
    "https://api.covid19india.org/state_district_wise.json"
)
    .then((res) => res.json())
    .then((data) => {
        for (let district in data["Tamil Nadu"].districtData) {
        
                districts.push(
                    // obj["district"] = [district];
                    data["Tamil Nadu"].districtData[district],
                );
      districts.map((districtName)=>{
        districtName.district = district
      })

        }
    });

// for (var key in districts) {
//   console.log(key);
// }
 console.log(districts)

【问题讨论】：

fetch 是异步的，尝试将console.log(districts) 移动到districts.map(...); 之后
不相关的问题，但是您也误用了.map()，当您只想执行迭代时使用.forEach()，.map() 用于转换元素并返回修改后的数组。见Is performing a mapping operation without using returned value an antipattern?

标签： javascript arrays json reactjs fetch

【解决方案1】：

您不会在 fetch 调用后立即获得 districts，因为它是异步调用。

这是 React 的做法。组件挂载时执行 fetch 调用。首先 useEffect 在组件挂载时触发（参见空依赖数组）。每当 districts 数据发生更改时，都会触发第二个 useEffect。

const [districts, setDistricts] = useState([]);


useEffect(()=>{

    const fetchedData = fetch(
       "https://api.covid19india.org/state_district_wise.json"
    )
    .then((res) => res.json())
    .then((data) => {
        for (let district in data["Tamil Nadu"].districtData) {
        
                districts.push(
                    // obj["district"] = [district];
                    data["Tamil Nadu"].districtData[district],
                );
      districts.map((districtName)=>{
        districtName.district = district
      })
      

        }
        // set state
        setDistricts(districts);
    });

}, []);


// for (var key in districts) {
//   console.log(key);
// }
useEffect(()=> {
   console.log(districts)
}, [districts]);

【讨论】：

还不行。

【解决方案2】：

如下所示，fetch 是异步的，console.log(2,...) 在 console.log(1,...) 之前记录。只需在 console.log(1, ...) 附近执行其余代码即可。或者使用 await/async 语法

const districts = [];
const fetchedData = fetch(
    "https://api.covid19india.org/state_district_wise.json"
)
    .then((res) => res.json())
    .then((data) => {
        for (let district in data["Tamil Nadu"].districtData) {
        
                districts.push(
                    // obj["district"] = [district];
                    data["Tamil Nadu"].districtData[district],
                );
      districts.map((districtName)=>{
        districtName.district = district
      })
      console.log('1', districts)

        }
    });

// for (var key in districts) {
//   console.log(key);
// }
console.log('2', districts)

【讨论】：