如何用数据库返回数据设置useState？状态字段出现undefined求助

场景复现 #

代码编译正常，但执行后accountInfo的属性值均为undefined，相关代码及输出如下：

customer_data = customer_data?.listCustomers[0];

console.log(customer_data?.sunday_open);  // 返回 08:00:00
const [accountInfo, setAccountInfo] = useState({ 
  "sunday_open_hours": customer_data?.sunday_open.split(":")[0], 
  "sunday_open_mins" : customer_data?.sunday_open.split(":")[1]
});
console.log(accountInfo)

执行console.log(accountInfo)返回：

{sunday_open_hours: undefined, sunday_open_mins: undefined}

原因分析 #

核心问题在于useState的初始值仅在组件首次渲染时计算一次：

• 若customer_data是异步获取（比如接口请求、useEffect中赋值），首次渲染时customer_data?.sunday_open大概率还未拿到有效值，此时undefined.split()会返回undefined，导致初始状态被设为undefined。
• 后续customer_data更新后组件会重新渲染，但useState不会重新计算初始值，所以accountInfo保持第一次的undefined状态，而你看到的console.log(customer_data?.sunday_open)是后续渲染阶段输出的有效值。

解决建议 #

• 方案1：用useEffect监听customer_data变化，动态更新状态
  当customer_data或sunday_open就绪时，手动更新accountInfo：

  customer_data = customer_data?.listCustomers[0];
  const [accountInfo, setAccountInfo] = useState({ 
    sunday_open_hours: '',
    sunday_open_mins: ''
  });
  
  useEffect(() => {
    if (customer_data?.sunday_open) {
      const [hours, mins] = customer_data.sunday_open.split(":");
      setAccountInfo({
        sunday_open_hours: hours,
        sunday_open_mins: mins
      });
    }
  }, [customer_data]); // 当customer_data变化时触发回调
  
  console.log(customer_data?.sunday_open);
  console.log(accountInfo);
  

• 方案2：初始化时做兜底判断，确保数据就绪后再渲染
  如果组件依赖customer_data，可以先判断数据是否存在，再执行状态初始化逻辑：

  if (!customer_data?.sunday_open) {
    return <div>加载中...</div>;
  }
  
  const [accountInfo, setAccountInfo] = useState({ 
    sunday_open_hours: customer_data.sunday_open.split(":")[0], 
    sunday_open_mins: customer_data.sunday_open.split(":")[1]
  });
  

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