javascript - 如何在编辑数组条目后设置状态

Question

我为数组的条目创建了一个编辑函数。从 edit 组件中，我将一个带有函数的对象传递给我的主要组件。这个对象有一个 id，它决定了它在数据库中是哪个对象。通过执行 AJAX put 请求，我将对象/条目发布到我的数据库中。这很顺利，所以下一步是更新我的当前状态，这样我就不需要刷新来更改数据。我猜这是对的，但是，它的工作方式并不是那么好。

editIcecream(product) {

    product.price = Number(product.price)

    fetch( '/api/icecreams/' + product.id, {
        method:'put',
        headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
        },
        body: JSON.stringify(product)
    })
    .then(response => {
        return response.json();
    })

    .then( data => {
        /* Updating the state */
        var array = this.state.icecreams.filter((item) => {
            return item.id !== data.id
        });

        this.setState(() => ({
            icecreams: array.concat(product)
        }))

    }); 

}

所以主要问题是我正在做一个过滤器来删除当前条目，以及编辑前的数据，然后将产品连接到数组以再次添加我刚刚编辑的产品。但是，这将导致一个新的订单，这不是我想要的。因此，当我得到 id 为 1 和 6 的 2 个项目并编辑 1 时，新订单将变为 6，之后编辑的 id 为 1 的订单。那么我如何对数组进行排序或重新编写这个函数数组的顺序不会改变？

我试着添加这个:

this.state.icecreams.sort((a, b) => {
    return a.id - b.id
});

但这似乎也不起作用。

Answer 1

以这种方式更新数组:

this.setState((prevState) => ({
    icecreams: prevState.icecreams.map(item => item.id === data.id? product: item)
}))

它会做的是，它会维护订单或每个项目。每当它找到具有您编辑过的 ID 的项目时，它将返回更新后的项目，否则返回相同的项目。

另一个要点是，您需要在 setState updater 函数中使用 prevState。检查 doc 更多解释，为什么我们需要使用它。

检查这个片段:

let arr = [{a:1, id:1}, {a:2, id:2}, {a:3, id:3}];

let update = (id, newData) => {
   return arr.map(el => el.id==id? newData: el);
}

let newArr = update(2, {a:5, id:5});

console.log('newArr = ', newArr);