语法错误：JSON.parse 中出现意外标记 - 发送到后端的 JSON 格式无效

Question

给您一些背景信息：

我正在尝试使用客户端/服务器架构实现一个简单的 Crud。 在这样做的同时，我尝试制作一个多步骤表格，因为很多表格变得相当长， 但是，我很快意识到多步骤表单比简单的单页表单更难进行错误检查。

为了检查表单的唯一值是否确实在数据库中未使用，我创建了一个反应查询，它将为我检查它并在返回消息为假时显示一条消息，这意味着数据库中存在重复项。

当我尝试实现上述 API 端点时，我遇到了一个奇怪的错误：

发送到后端的值是一个 json，其中包含以下值：

{"名称": ""xValue""}

这让我的后端完全崩溃了。

我可能可以尝试做一些字符串操作来“清理”字符串，然后再将其转换为 json 并将其发送回后端。

但我想在修复错误之前我应该解决真正的问题： 我捕捉价值的方式。我认为...

这些是我用于此“唯一检查”的一些相关代码

//将保存该值的useState：

  const [carnetValue, setCarnetValue] = useState('');

//React Query 和 onChange 反应函数：

  const { data: isUnique } = useQuery(["checkCarnet", carnetValue], () => apiClient.checkCarnet(carnetValue), {
    enabled: !!carnetValue
  });


  const handleChange = (value: string) => {
    setCarnetValue(value);
  }

//输入本身：

  <input
          type="text"
          className="border border-blue-500 w-full py-1 px-2 font-normal"
          {...register("carnet", { required: "Este campo es necesario", onChange: e => handleChange(e.target.value) })}
        />

//API客户端：

export const checkCarnet = async (carnet: string): Promise<RevisarDato> => {
  console.log(carnet);
  const response = await fetch(`${BASE_API_URL}/api/auth/check-carnet`, {
    method: "POST",
    body: JSON.stringify(carnet),
    headers: {
      "Content-type": "application/json",
    },
  });
  if (!response.ok) {
    throw new Error("Something went wrong");
  }
  const returnData = await response.json();
  return returnData;
};

// 如果有必要或相关，这是后端端点

export const checkCarnet = async (req: Request, res: Response) => {
  const { carnet } = req.body;
  try {
    const yaExiste = await pool.query(
      "SELECT * FROM Personas WHERE carnet = $1",
      [carnet]
    );
    if (yaExiste.rows.length != 0) {
      return res.status(400).json({ result: false });
    }
    return res.status(200).json({ message: true });
  } catch (error) {
    console.log(error);
    res.status(500).json({ result: "Internal Server Error 500" });
  }
};

这是显示的错误本身的示例：

SyntaxError: Unexpected token '"', ""asdasda"" is not valid JSON
    at JSON.parse (<anonymous>)

基于此，我只能假设它与捕获值的方式有关。也许是因为我同时使用自定义 onChange 和 React-hook-form。也许某种形式的字符串操作总是必要的。我不太确定。

除了启发这篇文章的错误之外，我还希望任何有关代码本身或如何错误检查表单中的唯一性的反馈或输入。

话虽如此，我很感谢您抽出时间查看我的帖子！

Answer 1

向服务器发送数据时，您只是发送一个字符串：

body: JSON.stringify(carnet)

这就是为什么您会得到带双引号的值

""asdasda""

。

考虑到在服务器端您正在检索

carnet

键，您需要更改请求以发送有效的 JSON：

body: JSON.stringify({ carnet: carnet })

我希望这有帮助。