React中双验证通过后无法执行目标代码的问题排查

核心问题：dateValid函数逻辑缺失 #

你的dateValid函数只在截止日期早于当前时间时调用了callback(false)，但当日期验证通过（截止日期符合要求）时，完全没有触发回调函数。这就导致即使日期合法，嵌套的dateValid回调也不会执行，自然进不了console.log('date')的代码块。

修复后的dateValid函数 #

export const dateValid = (deadline, callback) => {
  const datediff = new Date(deadline).getTime() - Date.now();
  
  if(datediff < 1) {
    callback(false);
  } else {
    // 新增验证通过时的回调调用
    callback(true);
  }
}

额外优化建议（可选） #

1. 原日期判断逻辑datediff < 1不符合“至少晚于当前日期一天”的需求——如果用户选了明天同一时间之前的日期，datediff会大于0但不足一天。建议修正判断条件：

// 一天的毫秒数：24*60*60*1000 = 86400000
const oneDayMs = 86400000;
if(datediff < oneDayMs) {
  callback(false);
} else {
  callback(true);
}

2. 嵌套回调易造成“回调地狱”，可以把验证函数改成Promise形式，简化代码结构：

// 改造dateValid为Promise
export const dateValid = (deadline) => {
  return new Promise((resolve) => {
    const oneDayMs = 86400000;
    const datediff = new Date(deadline).getTime() - Date.now();
    resolve(datediff >= oneDayMs);
  });
};

// 改造checkIfImage为Promise
export const checkIfImage = (url) => {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = url;
  
    if (img.complete) {
      resolve(true);
      return;
    }
  
    img.onload = () => resolve(true);
    img.onerror = () => resolve(false);
  });
};

// 使用async/await简化提交逻辑
const handleSubmit = async (e) => {
  e.preventDefault();

  const imageValid = await checkIfImage(form.image);
  if (!imageValid) {
    alert('Provide valid image URL');
    setForm({ ...form, image: '' });
    return;
  }

  const dateValid = await dateValid(form.deadline);
  if (!dateValid) {
    alert('End date must at least one day from today');
    setForm({ ...form, deadline: '' });
    return;
  }

  // 验证通过，执行后续逻辑
  console.log('date');
};

内容的提问来源于stack exchange，提问作者0x1dsawdwae