React Native中Pressable按钮首次点击不跳转至首页问题排查

核心原因：异步操作时序错误 #

你当前的代码逻辑里，getProfile 内部的 axios.post 是异步请求，它不会阻塞后续代码执行。点击按钮时，你先调用 getProfile，紧接着就判断 profile.responseOfProfile——这时候异步请求还没完成，setProfile 还没更新状态，所以首次点击时这个判断条件大概率不成立，自然不会跳转。第二次点击时，之前的异步请求已经完成，profile 状态已经更新，条件满足才会跳转。

客户端代码修正 #

把跳转逻辑放到 axios 的 .then 回调里，确保只有在请求完成、状态更新后才执行跳转：

// AXIOS request
function getProfile(){
  try{
    axios.post('http://********/checkData',
    {
      usernameCheckAXIOS : username,
      passwordCheckAXIOS : password,
    })
    .then(function (response){
      setProfile(response.data);
      // 请求完成后再判断并跳转
      if(response.data.responseOfProfile == true){
        navigation.navigate('Home');
      }
    }).catch((error) => {console.log("Log In axios error" + error)})
  }
  catch(error){
    console.log("LogIn try Error" + error);
  }
}

{/* Pressable for Sign In */}
<Pressable style={styles.pressableSignIn} onPress={() => getProfile()}>
  <Text style={styles.signText}>Sign in</Text>
</Pressable>

服务端潜在问题及修正 #

1. SQL注入风险：直接把用户输入拼接到SQL语句里是严重安全漏洞，必须用参数化查询。
2. 结果判断错误：resQuery 是查询返回的结果数组，判断是否有数据应该用 resQuery.length > 0，而非 resQuery != 0。
3. 全局变量复用问题：全局的 dataProfile 在高并发场景下会出现数据混乱，应每次请求单独创建响应对象。

修正后的服务端代码：

// 移除全局的dataProfile，每次请求按需创建

// For data login - Check
app.post("/checkData",(req,res) => {
  const resultOfData = req.body;
  console.log(resultOfData);

  // 使用参数化查询防止SQL注入
  const query = 'SELECT id,username,password,image,email from register where username=? AND password=?';
  database.query(query, [resultOfData.usernameCheckAXIOS, resultOfData.passwordCheckAXIOS], (err, resQuery) => {
    if(err){
      console.error(err);
      return res.status(500).send({responseOfProfile: false});
    }
    if(resQuery.length > 0){
      // 直接创建响应对象，不用全局变量
      res.send({
        responseOfProfile : true,
        dataOfProfile : resQuery[0],
      });
    }else{
      res.send({responseOfProfile: false});
    }
  });
})

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