Question

React中将新对象推送到没有键然后具有状态更新的对象内的数组的最佳实践是什么？我目前可以对其进行更新，但是它正在改变我所知不是最佳实践的状态。我希望能够使用this.setState，以便重新发布我的组件。谢谢！

currentState = {
    lorem: [
        {
            id: 123,
            title: 'quis nostrud'
            ipsum: [
                {
                    dolor: 0,
                    amet: 0
                }
            ]
        },
        {
            id: 456,
            title: 'occaecat cupidatat'
            ipsum: [
                {
                    dolor: 0,
                    amet: 0
                }
            ]
        }
    ]
}

desiredState = {
    lorem: [
        {
            id: 123,
            title: 'quis nostrud'
            ipsum: [
                {
                    dolor: 0,
                    amet: 0
                },
                {
                    dolor: 100,
                    amet: 100
                }
            ]
        },
        {
            id: 456,
            title: 'occaecat cupidatat'
            ipsum: [
                {
                    dolor: 0,
                    amet: 0
                }
            ]
        }
    ]
}

Answer 1

是的，您不应该直接更改原始状态。您需要在数组中找到需要更新的对象的ID，然后更新状态。

const updatedLorem = currentState.lorem.map(x => {
    if(x.id === '123') // <----- you will need to know which id to update
        return [...x.ipsum, {dolor: 0, amet: 0}]
    else
        return x
})

this.setState(prev => ({
    ...prev,
    lorem: updatedLorem
}))

Answer 2

我已经更新了@gdh上的代码，该代码正在用新的ipsum数组覆盖lorem对象。

这是一个有效的示例，它将新对象附加到lorem对象内的正确ipsum数组：https://codesandbox.io/s/cool-star-k8kpo?fontsize=14&hidenavigation=1&theme=dark

如何使用React更新数组中对象的状态？

2 个答案: