使用数组响应setState，如何在不构造的情况下自动创建数组id

Question

我正在尝试从firebase获取setState，它从节点响应并使用google创建--映射--像这样的反应

{maskprop.map(({ ................. }, index) => (
          <Marker 
            onClick={this.onMarkerClick}
            name={name} 
            position={{lat, lng}} 
            key={index}
          />
))}

所以我想将结果保存在一个状态数组中。

我从节点获得的响应数据：

    {
    "2303240013": {
        "address": "臺中市西區民權路105號",
        "county": "臺中市",
        "location": {
            "lat": 120.675929,
            "lng": 24.141144
        },
        "mask_adult": 0,
        "mask_child": 0,
        "name": "臺中市中西區衛生所",
        "phone": "04 -22223811",
        "town": "西區",
        "updated": ""
    },
    "2317020010": {
        "address": "臺中市東區信義街142號",
        "county": "臺中市",
        "location": {
            "lat": 120.687798,
            "lng": 24.13337
        },
        "mask_adult": 0,
        "mask_child": 0,
        "name": "臺中市東區衛生所",
        "phone": "04 -22834121",
        "town": "東區",
        "updated": ""
    }
}

我想像下面这样做setState

    0:
    address: "address1"
    county: "county1"
    location: {lat: 120.888455, lng: 24.173788}
    mask_adult: 0
    mask_child: 100
    name: "name1"
    phone: "phone1"
    town: "town1"
    updated: "2020/02/14 22:59:03"
    1:
    address: "address2"
    county: "county2"
    location: {lat: 120.888455, lng: 24.173788}
    mask_adult: 0
    mask_child: 100
    name: "name2"
    phone: "phone2"
    town: "town2"
    updated: "2020/02/14 22:59:03"

这是我现在的代码，它只能得到我为maskprop设置的最后一个状态。有人能介绍一下为数组创建索引的方法吗？

async getfirebasedata(){
    const response = await axios.post(
      'http://127.0.0.1:9000/hello',
      { county: '臺中市' },
      { headers: { 'Content-Type': 'application/json' } }
    )
    //console.log(response.data);
    var getdata = response.data;
    var item;
    for(item in getdata){
      //console.log(getdata[item].address);
      this.setState({
        maskprop:[
        {
          address: getdata[item].address,
          county: getdata[item].county,
          location: getdata[item].location,
          mask_adult: getdata[item].mask_adult,
          mask_child: getdata[item].mask_child,
          name: getdata[item].name,
          phone: getdata[item].phone,
          town: getdata[item].town,
          updated: getdata[item].updated,
        }],
      })
    }

    console.log(this.state.maskprop);
  }

或者任何其他方法来创建多个？

Answer 1

使用Object.keys和.map()将对象转换为数组，

​

const data = {
    "2303240013": {
        "address": "臺中市西區民權路105號",
        "county": "臺中市",
        "location": {
            "lat": 120.675929,
            "lng": 24.141144
        },
        "mask_adult": 0,
        "mask_child": 0,
        "name": "臺中市中西區衛生所",
        "phone": "04 -22223811",
        "town": "西區",
        "updated": ""
    },
    "2317020010": {
        "address": "臺中市東區信義街142號",
        "county": "臺中市",
        "location": {
            "lat": 120.687798,
            "lng": 24.13337
        },
        "mask_adult": 0,
        "mask_child": 0,
        "name": "臺中市東區衛生所",
        "phone": "04 -22834121",
        "town": "東區",
        "updated": ""
    }
}

const array = Object.keys(data).map(key => data[key]);

console.log(array)

​

async getfirebasedata() {
  const response = await axios.post(
    "http://127.0.0.1:9000/hello",
    { county: "臺中市" },
    { headers: { "Content-Type": "application/json" } }
  );
  //console.log(response.data);
  const getData = response.data;
  const data = Object.keys(getData).map(key => getData[key]);

  this.setState({
    maskprop: data
  }, () => console.log(this.state.maskprop));
}

Answer 2

只需遍历一个对象并将其转换为一个数组，但是我应该注意到，对象不是一个平面结构，因此索引将以任意顺序创建。

​

const apiData = {
    "2303240013": {
        "address": "臺中市西區民權路105號",
        "county": "臺中市",
        "location": {
            "lat": 120.675929,
            "lng": 24.141144
        },
        "mask_adult": 0,
        "mask_child": 0,
        "name": "臺中市中西區衛生所",
        "phone": "04 -22223811",
        "town": "西區",
        "updated": ""
    },
    "2317020010": {
        "address": "臺中市東區信義街142號",
        "county": "臺中市",
        "location": {
            "lat": 120.687798,
            "lng": 24.13337
        },
        "mask_adult": 0,
        "mask_child": 0,
        "name": "臺中市東區衛生所",
        "phone": "04 -22834121",
        "town": "東區",
        "updated": ""
    }
}

const parseApiData = data => {
  return Object.keys(data).map(key => data[key])
}

console.log(parseApiData(apiData))

​