React组件Props传递后useState初始值为undefined问题排查

问题根源 #

1. Props名称不匹配（部分状态初始化错误） #

你代码里父组件传递的props名称和子组件接收的存在多处不匹配：

• 父组件传userState，子组件用props.state初始化updatedUserState
• 父组件传userAbout，子组件用props.about初始化updatedUserAbout
• 父组件传userCity，子组件用props.city初始化updatedUserCity
• 父组件传userAddress，子组件用props.address初始化updatedUserAddress
• 父组件传userStatus，子组件用props.status初始化updatedUserStatus
• 父组件传userCountry，子组件用props.country初始化updatedUserCountry

这些不匹配直接导致对应state的初始值为undefined。而你提到的fullName虽然名称匹配，但还有另一个核心问题。

2. useState初始值仅生效一次，异步数据导致初始值为undefined #

用户信息是从Firebase异步获取的，组件首次渲染时，父组件的fullName还未拿到数据，处于undefined状态，此时useState(props.fullName)会把updatedUserFullName初始化为undefined。等Firebase数据加载完成后，父组件的fullName更新为有效值，但React的useState不会自动同步props的后续更新，所以updatedUserFullName会保持最初的undefined，而此时props.fullName已经有值，就出现了你看到的异常情况。

解决方法 #

修正Props名称不匹配 #

把子组件中所有初始化state的props名称改为和父组件传递的一致，示例：

const AdminEdit = (props) => {
  const [updatedUserState, setUpdatedUserState] = useState(props.userState);
  const [updatedUserCity, setUpdatedUserCity] = useState(props.userCity);
  const [updatedUserAddress, setUpdatedUserAddress] = useState(props.userAddress);
  const [updatedUserAbout, setUpdatedUserAbout] = useState(props.userAbout);
  const [updatedUserPhone, setUpdatedUserPhone] = useState(props.phone);
  const [updatedUserFullName, setUpdatedUserFullName] = useState(props.fullName);
  const [updatedUserName, setUpdatedUserName] = useState(props.userName);
  const [updatedUserEmail, setUpdatedUserEmail] = useState(props.email);
  const [updatedUserStatus, setUpdatedUserStatus] = useState(props.userStatus);
  const [updatedUserCountry, setUpdatedUserCountry] = useState(props.userCountry);
  // ... 其他代码
}

同步异步更新的Props到State #

使用useEffect监听props的变化，当props更新时同步更新对应的state：

import { useState, useEffect } from 'react';

const AdminEdit = (props) => {
  // ... 初始化state代码
  
  useEffect(() => {
    // 同步fullName的变化
    setUpdatedUserFullName(props.fullName);
    // 同步其他需要更新的state
    setUpdatedUserName(props.userName);
    setUpdatedUserPhone(props.phone);
    setUpdatedUserState(props.userState);
    // ... 其他需要同步的state
  }, [props.fullName, props.userName, props.phone, props.userState /* 所有需要监听的props */]);
  
  // ... 其他代码
}

另外，如果你的场景只是展示和编辑props传递的数据，也可以考虑直接使用props，无需维护本地state；只有当需要在组件内临时修改数据再提交时，才需要用state维护编辑状态。

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