Question

我正在 like-counter NextJS 应用程序中构建一个 ReactJS，它存储一个持久的可递增 count 值。 max-count / clicks 的 likes 将设置为 100。 button 不会增加 count 超过此值。 like-counter 值存储在 FaunaDB 中。

我可以在前端呈现存储在 db 中的值，但我无法让 onClick 处理程序更新存储在 { {1}}。

这是（评论）db 到目前为止：

此处，code 是通过 State 钩子声明的。

useState

updateLikes 函数

const [likes, setLikes] = useState([]);

async function updateLikes() { await fetch("/api/newLikes", requestOptionsLikes) .then(() => getLikes()) .catch((e) => console.log(e)) } 方法被实例化：

PUT

一个 useEffect 钩子：

  const requestOptionsLikes = {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ likes })
  }

点击功能：

useEffect(() => {
   getLikes();
   }, []);

呈现可点击的 const handleSubmitLikes = (e) => { e.preventDefault(); updateLikes(); } 按钮并显示来自 JSX 的值的 LIKE。

db

代码正确地从数据库中获取了 <div> <div onClick={handleSubmitLikes}>LIKE</div> </div> { likes.map((d) => ( <div> <div>{d.data.like}</div> </div> ))} </div>，所以我认为没有必要显示 likes getLikes。但是，API newLikes 返回 500 内部服务器错误，因此我将其显示如下：

API

基本上，我无法通过 PUT 方法更新数据库。

Answer 1

您演示的代码似乎增加了 PUT 请求中提供的值，这可能允许当前客户端指定任何值。也没有证据表明您将计数上限设为 100。

您可以完全在 FQL 中使用如下查询执行计数器增量：

q.Let(
  {
    counterRef: q.Ref(q.Collection('Likes'), '305446225474224651'),
    counterDoc: q.Get(q.Var('counterRef'),
    counterVal: q.Select(['data', 'like'], q.Var('counterDoc')
    newCounterVal: q.If(
      q.GTE(q.Var('counterVal'), 100),
      100,
      q.Add(q.Var('counterVal'), 1)
    ),
    update: q.If(
      q.Equals(q.Var('counterVal'), q.Var('newCounterVal')),
      null,
      q.Update(
        q.Var('counterRef'),
        { data: { like: q.Var('newCounterVal') } }
      )
    )
  },
  q.Var('newCounterVal')
)

这使用 Let 来分配一些命名值，以便于重用值。仅当 newCounter 小于 100 时，才将 counterVal 值设置为递增的 counterVal。仅当计数器实际发生变化（例如，值小于 100）时才会更新计数器。查询返回 newCounterVal 的值。

理想情况下，您应该将此查询嵌入到用户定义的函数 (UDF) 中。每当您的上限计数为 100 的规则需要更改时，只需更新 UDF，而不是应用程序代码中可能出现 100 的每个位置。

如何使用数据库构建计数器以将值保留在 NextJS 中？

1 个答案: