如何用const声明对象属性？React中formState.title赋值的实现方法

现有代码问题 #

你当前直接对formState.title赋值的写法不符合React useState的使用规范：useState创建的状态不可直接修改，直接赋值不会触发组件重渲染，修改后的状态也不会生效。
你已经在initialState中声明了title作为formState的内置属性，不需要额外单独声明变量，只需要按规范更新状态即可，有两种实现方式：

方式1：复用现有setInput方法更新 #

直接调用你已经封装好的setInput函数传入对应键值即可，代码修改如下：

const userTitle = await API.graphql(graphqlOperation(getUserTitle, {id: userInfo.attributes.sub}))
// 替换掉原有直接赋值的代码
setInput('title', userTitle.data.getUser.title)

方式2：直接调用setFormState更新（推荐函数式写法避免闭包问题） #

如果你不想复用setInput，也可以直接调用状态更新函数，函数式更新可以确保拿到最新的前序状态，避免闭包陷阱：

const userTitle = await API.graphql(graphqlOperation(getUserTitle, {id: userInfo.attributes.sub}))
setFormState(prevState => ({
  ...prevState,
  title: userTitle.data.getUser.title
}))

额外说明 #

如果你需要单独使用title变量，可以直接从formState中解构获取：

const { title } = formState

这样拿到的title会跟随formState的更新自动同步最新值。

内容的提问来源于stack exchange，提问作者Tony