如何在React的useState中同步更新用户姓名相关的多个属性

当用户修改名字或姓氏时，需要同步更新FullName属性，核心思路是基于最新的用户状态拼接全名，同时使用React的函数式状态更新避免异步更新导致的旧值问题。

修改后的setFormInput函数如下：

const setFormInput = (fieldName, value) => {
  setUserDetail(prevState => {
    switch (fieldName) {
      case 'firstName':
        return {
          ...prevState,
          GivenName: value,
          FullName: `${value} ${prevState.FamilyName}`
        };
      case 'lastName':
        return {
          ...prevState,
          FamilyName: value,
          FullName: `${prevState.GivenName} ${value}`
        };
      default:
        return prevState;
    }
  });
};

额外优化（可选） #

如果需要处理用户清空输入的情况，避免出现多余空格，可以在拼接时添加空值处理：

// 修改名字时的FullName拼接
FullName: `${value.trim() || ''} ${prevState.FamilyName.trim() || ''}`.trim()

// 修改姓氏时的FullName拼接
FullName: `${prevState.GivenName.trim() || ''} ${value.trim() || ''}`.trim()

原有的TextField组件无需修改，保持现有调用方式即可。

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