Question

如何更新对象数组内对象的单个值

2020-08-22

59

javascript reactjs

我试图更新对象数组内的对象中的特定值。示例：

[
    {
        id: 1,
        service: 1001,
        country: {
            id: 1,
            countryname: India
        },
        ts: 1597758281
    },
    {
        id: 2,
        service: 1002,
        country: {
            id: 2,
            countryname: USA
        },
        ts: 1597758283
    }
]

现在，我想更新第一个对象的 country id 值，因此它会变成这样：

[
    {
        id: 1,
        service: 1001,
        country: {
            id: 2,
            countryname: USA
        },
        ts: 1597758281
    },
    {
        id: 2,
        service: 1002,
        country: {
            id: 2,
            countryname: USA
        },
        ts: 1597758283
    }
]

这是我到目前为止尝试过的方法，我获取了要更新的项目的索引。然后我创建了原始数组的副本，然后尝试更新该值。但它似乎不起作用。

handleUpdate = (event, item) => {
        const elementsIndex = this.state.laneArray.findIndex(element => element.id == item.id);

        let newArray = [...this.state.laneArray]

        if (event.target.name === "countryName") {
            newArray[elementsIndex] = { ...newArray[elementsIndex], [newArray[0].country.id]: event.target.value }
        }

        this.setState({
            laneArray: newArray,
        });
    }

我想我需要更新整个 country 对象。我该怎么做？

Answer 1

获得索引后，在该索引之前和之后对数组进行切片，并在中间将 country 属性设置为具有新 ID 和现有 countryname 的对象：

const input = [
    {
        id: 1,
        service: 1001,
        country: {
            id: 1,
            countryname: 'India'
        },
        ts: 1597758281
    },
    {
        id: 2,
        service: 1002,
        country: {
            id: 2,
            countryname: 'USA'
        },
        ts: 1597758283
    }
];
const i = 0;
const newId = 2;

const output = [
  ...input.slice(0, i),
  {
    ...input[i],
    country: { id: newId, countryname: input[i].country.countryname }
  },
  ...input.slice(i + 1),
];
console.log(output);

另请注意，字符串文字需要分隔符，如 ' 或 " 或反引号。