如何检查该名称是否已在数据库中使用？反应 + 公理

Question

我想制作一个验证项目唯一性的验证器。如果我想创建新的东西，我想先检查我是否已经在数据库中。

代码：

const [categList, setCategList] = useState([]);


  const getItems = () => {
    // Sending HTTP GET request
    Axios.get(url).then((response) => {
      const categories = [];
      response.data.forEach((resCateg) => {
        categories.push(resCateg.name + ", " + resCateg.description);
        console.log(resCateg);
      });
      setCategList(categories);
    });
  };

在我做之前：

function submit(e) {
    e.preventDefault();
    //reset form validation errors
    resetFormValidationErrors();


    Axios.post(url, {
      // Sending HTTP POST request
      name: data.name,
      description: data.description,
    }).then((res) => {
      resetForm();
    });
  }

我想在“preventDefault”下检查我的名字是唯一的。有帮助吗？

Answer 1

你只需要在你的状态中存储名字，然后你可以从那个数组中检查你的名字是否已经存在。

这是操作方法-

const [categList, setCategList] = useState([]);

const getItems = () => {
    // Sending HTTP GET request
    Axios.get(url).then((response) => {
        const categoryNames = response.data.map(res => res.name)
        setCategList(categoryNames);
    });
};

提交时检查-

function submit(e) {
    e.preventDefault();
    //reset form validation errors
    resetFormValidationErrors();

    // Checking here if `categList` already includes name
    if(categList.includes(data.name.trim())) {
        alert(`${data.name} is already taken, Please select any other name.`)
        return
    }

    Axios.post(url, {
        // Sending HTTP POST request
        name: data.name,
        description: data.description,
    }).then((res) => {
        resetForm();
    });
}

如何检查该名称是否已在数据库中使用？反应 + 公理

How do I check if the name is already taken in database? React + Axios

javascript

frontend

reactjs

axios