Возникла ошибка при вводе специального символа во вводе

#javascript #node.js #reactjs

Вопрос:

Когда я наберу «;/» во вводе поиска, я получу эту ошибку:

Необработанная ошибка во время выполнения Ошибка типа: приглашенные.фильтр — это не функция

Вот мой следующий код в интерфейсе:

 const { tab, teamId, privateTeamId, fetchTeamData } = props;

  const [searchQuery, setSearchQuery] = useState("");
  const [invitees, setInvitees] = useState([]);

  const handleChange = (event) => {
    event.preventDefault();
    setSearchQuery(event.target.value);
  };

  const getUserToInvite = async () => {
    const res = await axios.get(
      `/api/v1/search/users/invite/${searchQuery}/${teamId}`
    );
    setInvitees(res.data[0]);
    setShowInvitees(!showInvitees);
  };

          <>
            {invitees
              ?.filter(
                (user) =>
                  user.Memberships.length < 1 ||
                  (user.Memberships.every(
                    (member) => member.teamId !== privateTeamId
                  ) amp;amp;
                    user.InvitesApplications.response !== "Waiting on response")
              )
              .sort(
                (a, b) =>
                  new Date(a.InvitesApplications[0]?.createdAt) -
                  new Date(b.InvitesApplications[0]?.createdAt)
              )

           ...
         </>
 

и вот мой следующий код в SearchController в фоновом режиме:

 exports.searchUserToInvite = async (req, res) => {
  // Grab query
  const query = req.params.q;

  // Search for users
  const usersFound = await models.User.findAll({
    where: {
      [Op.or]: [
        {
          fullname: {
            [Op.iLike]: query   "%",
          },
        },
      ],
    },
    attributes: [
      "id",
      "fullname",
      "public_user_id",
      "institution",
      "location",
      "webpage",
      "linkedin",
      "major",
      "picture",
      "verifiedDT",
    ],
    include: [
      {
        model: models.Rating,
        attributes: ["skillset_rating", "team_member_rating"],
      },
      {
        model: models.Skill,
        attributes: ["skill"],
      },
      {
        model: models.Membership,
        attributes: ["teamId"],
      },
      {
        model: models.SubMembership,
        attributes: ["subTeamId"],
      },
      {
        model: models.InvitesApplications,
        attributes: [
          "id",
          "response",
          "teamId",
          "subTeamId",
          "createdAt",
          "updatedAt",
        ],
      },
    ],
  });

  // Run searches
  const searchData = await Promise.all([usersFound]);
  // Return results
  if (query.length <= 0) {
    return res.status(200).json([]);
  }
  res.status(200).json(searchData);
};
 

Как я могу исправить эту ошибку? Это потому, что мой внутренний код неправильный или мне нужно улучшить свой внешний код?

Ответ №1:

Размещение поискового запроса в качестве параметра пути кажется довольно странным, но ваша проблема в том, что вы неправильно кодируете значение для использования в URL-адресе.

Прогоните значения до encodeURIComponent() конца …

 const res = await axios.get(
  `/api/v1/search/users/invite/${encodeURIComponent(searchQuery)}/${encodeURIComponent(teamId)}`
);
 

ИМО, параметры поиска лучше всего обрабатываются с помощью параметров запроса, которые Axios автоматически правильно кодирует

 const res = await axios.get(url, {
  params: {
    q: searchQuery
  }
})
 

На стороне сервера вы бы прочитали это до конца req.query.q