时间戳

首页 > 解决方案 > 如果用户在搜索栏中输入不正确的查询格式，则反应句柄错误

reactjs - 如果用户在搜索栏中输入不正确的查询格式，则反应句柄错误

问题描述

我构建了一个 React 应用程序，它从 New York Times Bestseller Books API 获取数据，并允许用户在发布日期之前搜索不同的列表。

NYTimes 构建了此 API，因此必须以 YYYY-MM-DD 格式输入日期以进行搜索查询。我在搜索栏中添加了一个占位符以通知用户正确的格式，但我想知道如果用户以不正确的格式输入日期（例如 MM-DD-YYYY），我该如何处理错误。目前该应用程序只是崩溃。

我应该提到这只是我的投资组合的个人/学生项目。

这是我的搜索栏的更新代码：

  const [formData, setFormData] = React.useState({
     date: "",
  });


  const getBestsellersByDate = async (date) => {
    const response = await fetch(url + "/bestsellers/" + date, {
      method: "get",
      headers: {},
    });
    const fetchedBestsellers = await response.json();
    dispatch({ type: "getBestsellers", payload: fetchedBestsellers });
  };

const handleChange = (event) => {
    setFormData({ ...formData, [event.target.name]: event.target.value });
  };

  
  const handleSubmit = (event) => {
    event.preventDefault();
    try {
      if (Date.parse(formData.date)) {
        // books index from search date
        getBestsellersByDate(formData.date);
        // date specs for list corresponding to search
        getBestsellersArchiveDate(formData.date);
        setFormData({
          date: "",
        });
      }
    } catch (error) {
      event.preventDefault();
       alert.error(
         <div
           style={{ background: "#cf6679", color: "#000000", padding: "5px" }}
         >
           Please log in!
         </div>
       );
      console.log("enter valid date!");
    }
  };

  <div className="search-form_container">
          <Form inline onSubmit={handleSubmit}>
            <Form.Control
              type="text"
              name="date"
              pattern="/^\d{4}\-(0?[1-9]|1[012])\-(0?[1-9]|[12][0-9]|3[01])$/"
              className="search-form mr-sm-2"
              value={formData.date}
              onChange={handleChange}
              placeholder="YYYY-MM-DD"
            />
            <button id="btn-search" type="submit">
              Search
            </button>
          </Form>
        </div>

标签： reactjsapidate

解决方案

在你的handleSubmit函数中使用它：

const handleSubmit = (event) => {
    event.preventDefault();
    if(Date.parse(formData.date)){
       getBestsellersByDate(formData.date);
       setFormData({
         date: "",
       });
    } else {
       console.log("enter valid date!!!");
    }
  };

它将尝试Date从用户输入的字符串中解析 a，如果它是有效日期，它将调用 API，否则，它将 console.log 错误。显然，您可以使用其他组件（如snackbar.

推荐阅读