React中如何将API返回对象映射为自定义结构的useState状态

你现在跑出来的结果不对，本质是两个逻辑偏差：

1. 监听deliveryAddressInput变化的副作用函数里，直接把API返回的原始deliveryAddressInput整个传给setNewAddress，完全跳过了你本来要做的「字段名映射重组」步骤，直接拿原始对象覆盖了自定义结构的状态，最终结果当然和API返回完全一致
2. newAddress的状态初始化只在组件首次渲染时执行一次，初始化时deliveryAddressInput还是空对象，根本没拿到地址相关的有效值，后续也没有按映射规则更新这些字段的逻辑。

• 先给newAddress补全明确的初始结构，不要用无类型的useState<{}>，提前给所有字段设置空默认值，避免首次渲染时取值报错：

  const [newAddress, setNewAddress] = useState({
    firstName: firstNameInput,
    lastName: lastNameInput,
    houseNo: '',
    houseName: '',
    street: '',
    addressLine2: '',
    town: '',
    postCode: ''
  });
  

• 修正副作用里的同步逻辑，手动按字段对应关系重组对象，不要直接透传API原始值：

  useEffect(() => {
    // 地址值为空时跳过更新，避免覆盖成无意义的空值
    if (!deliveryAddressInput || Object.keys(deliveryAddressInput).length === 0) return;
    setNewAddress(prev => ({
      // 保留原有 firstName、lastName 的值，不要被覆盖
      ...prev,
      // 按你定义的字段映射关系赋值
      houseNo: deliveryAddressInput.BuildingNumber ?? '',
      houseName: deliveryAddressInput.BuildingName ?? '',
      street: deliveryAddressInput.Line1 ?? '',
      addressLine2: deliveryAddressInput.Line2 ?? '',
      town: deliveryAddressInput.City ?? '',
      postCode: deliveryAddressInput.PostalCode ?? ''
    }));
  }, [deliveryAddressInput]);
  

• 去掉原来代码里的setTimeout包裹：这个场景下定时器完全没有作用，反而会引入额外的时序问题，比如组件卸载后触发状态更新的控制台警告，React本身的状态更新调度已经可以处理异步API返回的时序了。
• 如果后续firstName、lastName的输入值会动态变化，单独给这两个输入绑定对应的状态更新逻辑即可，不用把所有字段的更新都堆在监听地址的副作用里。

注意核心逻辑别搞反：你需要的是把API返回的原始字段，按业务要求的键名拆出来重新拼成符合结构的新对象，不是把原始API对象直接赋值给目标状态。之前的问题就是跳过了“拆字段做映射”这最关键的一步。

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