在 React 中设置对象数组返回空数组答案

【问题标题】：Set Array of Object return empty array in React在 React 中设置对象数组返回空数组
【发布时间】：2020-09-02 21:04:56
【问题描述】：

我真的被困在这里了。请帮忙！

我有一个这样的数组：

0:{
area: {acres: "249,561.00", square_km: "1,009.9"}
coordinates: {latitude: 34.01, longitude: -119.42}
id: "park_channel-islands"
title: "Channel Islands"
visitors: "364,807}
1: {area: {…}, coordinates: {…}, date_established_readable...
2: .....
3: ....

这是我在构造函数this.state ={coodLabell:[]}中的状态

我想通过在数组中创建字段坐标和字段标题的对象来填充数组协调器。

例如：在索引 0 中。我想创建对象 {"title": title, "cood": coordinates" 并将其推送到构造函数中的空数组协调器中。

这是我尝试过的，但我总是取回空数组

  array.forEach((element) => {
            const title = element.title
            const cood = element.coordinates
            const  newData = {"title": title, "cood": cood}

            this.setState({coodLabell:[...this.state.coodLabell,...newData]})

如果你们能给我一些提示，我很感激。谢谢你

【问题讨论】：

标签： arrays reactjs object setstate

【解决方案1】：

我想这会起作用，你需要创建一个数组并在 foreach 之后将它与当前状态结合起来。

let newArray = []
    array.forEach((element) => {
      const title = element.title
      const cood = element.coordinates
      const newData = { "title": title, "cood": cood };
      newArray.push(newData);
    })
  this.setState({ coodLabell: [...this.state.coodLabell, ...newArray] })

【讨论】：

【解决方案2】：

试试这个

const  newData = {"title": title, "cood": cood}
let Data = this.state.coodLabell.push(newData)
this.setState({coodLabell:Data})

【讨论】：

【解决方案3】：

据我所知，您只想拥有原始对象的 2 个属性（title 和 coordinates）并摆脱其他属性。

在这种情况下，您必须映射数组，如下所示：

const data = [
  {
    area: { acres: '249,561.00', square_km: '1,009.9' },
    coordinates: { latitude: 34.01, longitude: -119.42 },
    id: 'park_channel-islands',
    title: 'Channel Islands',
    visitors: '364,807',
  },
  {
    area: { acres: '249,561.00', square_km: '1,009.9' },
    coordinates: { latitude: 20.01, longitude: -100.42 },
    id: 'park_channel-islands',
    title: 'Abc',
    visitors: '364,807',
  },
  {
    area: { acres: '249,561.00', square_km: '1,009.9' },
    coordinates: { latitude: 10.01, longitude: -50.42 },
    id: 'park_channel-islands',
    title: 'Xyz',
    visitors: '364,807',
  },
];

const filteredData = data.map(({title, coordinates}) => ({title, coordinates}))

console.log({filteredData})

// and here you can
// this.setState({ anything: filteredData })

【讨论】：

【解决方案4】：

试试下面的代码

const coodLabell = Object.values(yourData).map(element => {
    return {
      "title": element.title,
      "cood": element.coordinates
    }
});
this.setState({ coodLabell })

【讨论】：

【解决方案5】：

const [coodLabell, setCoodLabell] = useState({});

const array = [
  {
    area: {acres: "249,561.00", square_km: "1,009.9"}
    coordinates: {latitude: 34.01, longitude: -119.42}
    id: "park_channel-islands"
    title: "Channel Islands"
    visitors: "364,807
  },
  {....},
  {....},
  {....},
];

let coodLabell = array.map(item => {
   return {
     title: item.title,
     cood: item.coordinates
   }
})

setCoodLabell(coodLabell)

【讨论】：