React Native中useEffect调用异步函数时获取值为Undefined/Null的问题

1. 请求参数键重复，导致后端无法正确接收数据 #

你的Axios请求参数里重复使用了un键，对象中重复的键会被后面的覆盖，实际发送给后端的只有un: ps1，这会导致后端无法正确获取用户名和密码，自然返回空数据：

// 错误写法
{
  un: un1,
  un: ps1,
}

改成对应正确的键名（比如后端预期的用户名和密码字段名）：

// 修正后
{
  un: un1,
  ps: ps1,
}

2. useEffect依赖缺失，未监听Redux状态变化 #

你的useEffect依赖数组是空的，只会在组件首次挂载时执行一次。如果un1和ps1是异步同步到Redux的（比如组件挂载后才从本地存储/接口加载到Redux），首次执行loadowndetails时，un1和ps1还未赋值，请求参数为空，接口返回无结果。而保存后热重载时，Redux中已经有了有效值，所以请求能成功。

解决方法是把un1和ps1加入依赖数组，同时添加参数有效性判断，避免无效请求：

useEffect(() => {
  if (un1 && ps1) {
    loadowndetails();
  }
}, [un1, ps1]);

3. 额外优化：添加加载状态与参数校验 #

可以给组件添加加载状态，避免页面首次加载时显示空白，同时在请求函数里提前校验参数：

const [user, setUser] = useState([]);
const [loading, setLoading] = useState(true);

const loadowndetails = async () => {
  // 参数无效时直接返回
  if (!un1 || !ps1) return;
  setLoading(true);
  try {
    const resp = await Axios.post(
      'https://example.com/owndetailshomepage.php',
      {
        un: un1,
        ps: ps1,
      },
    );
    setUser(resp.data.phpresult);
  } catch (err) {
    console.error(err);
  } finally {
    setLoading(false);
  }
};

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