useEffect在bookIsBought未赋值时触发，Alert提前弹出问题求助

核心问题是useEffect会在组件挂载时（也就是bookIsBought处于初始状态时）就触发执行，此时请求还未返回数据，导致Alert提前弹出。可以从以下几个方向修复：

1. 给bookIsBought设置明确的初始状态 #

将bookIsBought的初始值设为null，清晰区分「未发起请求」和「请求返回无数据」的状态：

const [bookIsBought, setBookIsBought] = useState(null);

2. 在useEffect中先判断数据是否存在 #

只有当请求返回有效数据后，再执行后续逻辑，跳过初始渲染时的空值场景：

useEffect(() => {
  // 数据未返回时直接跳过
  if (!bookIsBought) return;

  try {
    if (bookIsBought[0].bookBought === 1) { 
      navigation.navigate('WebViewPdf', { paramKey: bookShow });
    } else {
      Alert.alert("Book is not Bought");
    }
  } catch (error) {
    console.log(error);
  }  
}, [bookIsBought]);

3. 直接将逻辑移至请求回调（更推荐） #

既然逻辑仅需在请求完成后执行，完全可以去掉useEffect，把判断逻辑放在axios的then回调里，这样只会在请求返回后触发，从根源避免初始渲染的问题：

function boughtRentChecker() {
  axios.post('http://*********/getBooksBought', {
    userID: global.id,
    bookID: bookShow.id
  })
  .then((response) => { 
    const data = response.data;
    console.log(data);
    
    // 直接在这里处理业务逻辑
    if (data[0].bookBought === 1) { 
      navigation.navigate('WebViewPdf', { paramKey: bookShow });
    } else {
      Alert.alert("Book is not Bought");
    }
    
    // 若其他地方需要用到该数据，再保留状态更新
    setBookIsBought(data);
  })
  .catch((error) => {
    // 补充请求错误处理，避免静默失败
    console.error('请求失败:', error);
    Alert.alert("请求出错，请稍后重试");
  });
}

修改后，只有用户点击按钮触发请求且请求返回后，才会执行导航或弹窗逻辑，不会在页面加载时就弹出Alert。

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