遍历数组 - 将 promise 返回的值添加到数组中的每个对象

Question

基本上，我有点困惑。 我有一个对象数组，每个对象都有一个人的名字和这个人居住的城市。

现在，我要做的是遍历整个数组，并获取循环中每个项目的城市与加利福尼亚州的距离。

我想要做的是使用城市名称来获取该城市与加利福尼亚州的距离并将其添加到数组中的每个对象中。

所以，假设索引 1 处的项目有阿拉巴马州，那么我想要从阿拉巴马州到加利福尼亚州的距离，并将其作为到该项目的财产距离

like {name: John1, city:'Alabama', distance:'无论距离是多少'}

现在，我已经使用 promise.allsettled 完成了该操作，但不确定它返回数据的顺序是否相同或混淆，因此不确定我是否将正确的距离附加到正确的项目。

我希望它以正确的顺序返回东西，并且我所做的方式是正确的，但如果有更好更清洁的方式来做到这一点，那么我想知道如何做到这一点。

这里也是代码

import React from 'react';
import _ from 'lodash';
import axios from 'axios';

export default class GetDistance extends React.Component{
    state = {
        loggedInCity: 'Georgia',
        isLoading: false,
        projectsWithDistance:[],
        projects : [
            {
                name: 'John1',
                city: 'Alabama'
            },
            {
                name: 'John2',
                city: 'Arizona'
            },
            {
                name: 'John3',
                city: 'California'
            }, 
            {
                name: 'John4',
                city: 'Colorado'
            },
            {
                name: 'John5',
                city: 'Connecticut'
            },
            {
                name: 'John',
                city: 'Florida'
            },
            {
                name: 'John6',
                city: 'Idaho'
            },
            {
                name: 'John7',
                city: 'Kansas'
            },
            {
                name: 'John8',
                city: 'Maine'
            },
            {
                name: 'John9',
                city: 'Hawaii'
            },
            
        ]
    }

    getDistance = (zipFrom, zipTo) => {   
        console.log('zipFrom : ',zipFrom);
        console.log('zipTo : ',zipTo);
        return new Promise((resolve, reject)=>{
          axios.post('http://localhost:8080/getDistance',{
          zipcodeTo:zipTo,
          zipcodeFrom:zipFrom
        })
        .then((res)=>{
          console.log('res from get distance in reducer : ',res.data);
          resolve(res.data.distance);
        })
        .catch((err)=>{
          console.log('error from distance : ',err)
          reject('');
        });
        })
        
    }

    async componentDidMount(){
        const projects = this.state.projects;
        const from = this.state.loggedInCity;
        const promisesArr = [];
        for(var i=0; i<projects.length;i++){
            let distance = 0;
            let to = projects[i].city;
            distance = this.getDistance(from,to);
            promisesArr.push(distance);
        }
        const results = await Promise.allSettled(promisesArr);
        console.log('results : ',results);
        const projectsWithDistance = [];
        for(var i=0; i<projects.length;i++){
            let newProject = _.cloneDeep(projects[i]);
            const distanceFromResult = results[i].value;
            newProject.distance = distanceFromResult;
            projectsWithDistance.push(newProject);
        }
        this.setState({
            isLoading:false,
            projectsWithDistance
        });
    }

    render(){
        const {projectsWithDistance,isLoading, loggedInCity} = this.state;
        return(
            <div>
                {isLoading?<h1>'Loading...</h1>:''}
                {!isLoading && projectsWithDistance.length>0?projectsWithDistance.map((item)=>{
                    return <div>Distance between {loggedInCity} and {item.city} is {item.distance}</div>
                }):''}
            </div>
        )
    }
}

Answer 1

您可以将for 循环替换为for..of 循环。

const results = []
for await (const project of projects){
  let distance = 0;
  let to = projects[i].city;
  this.getDistance(from,to).then(distance => results.push(distance))
}

for of 循环本质上是异步的。所以这应该可以完成。