reactjs - 如何更新嵌套反应中的深层对象

Question

我需要帮助制作一个将更新嵌套对象状态的处理程序。

这是示例代码

const [state, setState] = useState({
    firstName: '',
    lastName: '',
    permanentAddress: {
        street: '',
        city: ''
    },
    currentAddress: {
        street: '',
        city: ''
    }
});
const handler = (e) => {
    setState({...state, [e.target.name]: e.target.value})
}

然后我导入一个自定义文本字段

export const CustomTextField = (props) => {
    const { handler, ...rest } = props
    return (
        <TextField {...rest} onChange={handler} />
    )
}

现在我知道这只会创建一个street以该值命名的新键，而不是更新已经处于状态的键。我还想过只添加一个指示它是否嵌套的道具，例如

<CustomTextField cat='permanentAddress' name='street' handler={handler} />

然后我将处理程序更改为类似的东西，传递cat参数

const handler = (cat, e) => {
    if (cat) {
        const category = {...state[cat]}
        category[e.target.name] = e.target.value
        setState({...state, [cat]: category})
    } else {
        //non-nested update here
    }
}

有一个更好的方法吗？谢谢！

标签： reactjssetstate