React+Prisma更新MySQL整数字段报错及优化实现咨询

错误原因分析 #

你遇到的SyntaxError: Unexpected token o in JSON at position 1错误，根源有两处：

1. 前端fetch写法错误：你用了JSON.parse处理请求体，但fetch的body需要传入JSON字符串，而非解析后的对象。JSON.parse是把字符串转成对象，这里应该用JSON.stringify将对象转为字符串。
2. 后端接口重复解析：Next.js的API路由会自动解析JSON格式的请求体，req.body已经是解析后的对象，再调用JSON.parse(req.body)会把对象转成字符串"[object Object]"，解析这个字符串自然会报错。

修复后的JSON传递写法 #

前端React函数与按钮 #

async function change_status(object_id: number) {
  const response = await fetch('/api/db', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json', // 必须声明请求格式为JSON
    },
    body: JSON.stringify({ id: object_id }) // 用stringify生成JSON字符串
  });

  if (!response.ok) {
    throw new Error(response.statusText);
  }
  return await response.json();
}

<button onClick={() => change_status(object.id)}>
    change Status
</button>

后端Next.js接口 #

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  // 直接使用已解析的req.body
  const { id: object_id } = req.body;
  const find_object = await prisma.objects.findFirstOrThrow({
    where: { id: object_id }
  });
  // 简化状态切换逻辑
  const newStatus = find_object.status === 0 ? 1 : 0;
  const change = await prisma.objects.update({
    where: { id: object_id },
    data: { status: newStatus },
  });
  res.json(change);
}

无需JSON传递的实现方式（URL参数） #

直接把object_id放在请求URL的查询参数里，不用请求体，写法更简洁：

前端React函数与按钮 #

async function change_status(object_id: number) {
  const response = await fetch(`/api/db?id=${object_id}`, {
    method: 'GET', // GET请求适合无请求体的场景
  });

  if (!response.ok) {
    throw new Error(response.statusText);
  }
  return await response.json();
}

<button onClick={() => change_status(object.id)}>
    change Status
</button>

后端Next.js接口 #

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  // 从query中获取ID，注意转成数字类型
  const { id: object_id } = req.query;
  const numericId = parseInt(object_id as string, 10);
  
  if (isNaN(numericId)) {
    return res.status(400).json({ error: '无效的对象ID' });
  }

  const find_object = await prisma.objects.findFirstOrThrow({
    where: { id: numericId }
  });
  const newStatus = find_object.status === 0 ? 1 : 0;
  const change = await prisma.objects.update({
    where: { id: numericId },
    data: { status: newStatus },
  });
  res.json(change);
}

内容的提问来源于stack exchange，提问作者PrzepalonyDecybel