reactjs 在React中为true时无法访问函数

1tu0hz3e  于 2023-01-02  发布在  React
关注(0)|答案(1)|浏览(118)
export const dateValid = (deadline, callback) => {
  const datediff = new Date(deadline).getTime() - Date.now();
  
  if(datediff < 1) callback(false)

}
export const checkIfImage = (url, callback) => {
    const img = new Image();
    img.src = url;
  
    if (img.complete) callback(true);
  
    img.onload = () => callback(true);
    img.onerror = () => callback(false);
  };

我在index.js中创建了这两个函数。checkIfImage用于验证图像URL,其中dateValid用于确保用户选择了有效的日期。如果图像URL不存在或截止日期不在当前日期之后至少一天,则回调为false。图像URL和截止日期是从用户输入中获取的值。
下面的代码是另一个文件中的函数之一。我希望用户必须填写输入,它将获得图像URL和截止日期。用户单击提交按钮后,handleSubmit函数将被调用以检查这两个输入。

const handleSubmit = async (e) => {
    e.preventDefault();

    checkIfImage(form.image, async (exists) => {
      if (exists) {
        dateValid(form.deadline, async (exists) => {
          if (exists) {
            console.log('date')
          } else {
            alert('End date must at least one day from today')
            setForm({ ...form, deadline: '' });
          }
        })
      } else {
        alert('Provide valid image URL')
        setForm({ ...form, image: '' });
      }
    })
  }

当图像URL或日期无效时,两个else语句都可以正常工作,但只有当两个输入有效时,console. log('date')部分才无法访问。有人知道我哪里出错了吗,谢谢。

ljsrvy3e

ljsrvy3e1#

也许可以尝试记录第二个existsform.deadline,看看里面有什么。
您还可以更改第二个exists的名称,以确保它不会干扰第一个。
在您的dateValid函数中,缺少callback(true),如下所示:

export const dateValid = (deadline, callback) => {
  const datediff = new Date(deadline).getTime() - Date.now();
  
  if(datediff < 1) callback(false)
  else callback(true)

}

相关问题