javascript - 反应中 prevstate 的对象

Question

我有对象处于类状态。

man: {
name: "John",
wife: [{"children": 2}, {"children": 3}]
}
this.setState(prevState => ({man: prevState.wife[0].children + 1}));

我想加减第一任妻子的孩子数量。我使用 prevState 但它不起作用。为什么以及如何更改此属性？

标签： javascriptreactjsclassstate

Answer 1

你的旧状态：

{
    man: {
        name: "John",
        wife: [{"children": 2}, {"children": 3}]
    }
}

你正在返回新的状态：

{
    man: 3
}

如果您需要保留相同的状态结构，解决方案可以是：

this.setState(prevState => ({
    man: {
        ...prevState.man,
        wife: prevState.man.wife.map((value, i) => (i === 0 ? {
            ...value,
            children: value.children + 1
        } : value)),
    }
}));

但是这种修改通常使用lodash/fp update或Ramda over更容易：

this.setState(prevState => R.over(
    R.lensPath([`man`, `wife`, 0, `children`]),
    (v) => v + 1,
    prevState,
));