Next js 中的 LocalStorage

Posted 2023-03-17

【中文标题】Next js 中的 LocalStorage

【英文标题】：LocalStorage in Next js

【发布时间】：2022-01-18 16:44:26

【问题描述】：

我正在尝试将一些项目 set 在 Next js 应用程序中的 localStorage 中，但它无法正常工作，并且我在 localStorage 中没有保存任何内容。

这是我的代码：

function AsyncForm(props) 

const [job, setJob] = useState(
    typeof window !== "undefined"
      ? localStorage.getItem("job")
      : typeof window !== "undefined"
      ? JSON.parse(localStorage.getItem("job"))
      : null
  );

  const [caption, setCaption] = useState(
    typeof window !== "undefined"
      ? localStorage.getItem("caption")
      : typeof window !== "undefined"
      ? JSON.parse(localStorage.getItem("caption"))
      : null
  );

  const [transcription, setTranscription] = useState(
    typeof window !== "undefined"
      ? localStorage.getItem("transcription")
      : typeof window !== "undefined"
      ? JSON.parse(localStorage.getItem("transcription"))
      : null
  );

  useEffect(() => 
    if (!job) return;

    const url = `api/caption/$job.id`;
    fetch(url)
      .then((res) => res.text())
      .then((caption) => 
        window.localStorage.setItem("caption", JSON.stringify(caption));
        setCaption(caption);
      )
      .catch((err) => console.log(err));
  , [job]);

  useEffect(() => 
    if (!job) return;

    const transUrl = `/api/transcription/$job.id/text`;
    fetch(transUrl)
      .then((res) => res.text())
      .then((transcription) => 
        window.localStorage.setItem(
          "transcription",
          JSON.stringify(transcription)
        );
        setTranscription(transcription);
      )
      .catch((err) => console.log(err));
  , [job]);

return (
    <>
      job && transcription ? (
        <p style= color: "white", paddingTop: "200px" >transcription</p>
      ) : (
        <p style= color: "white", paddingTop: "200px" >loading...</p>
      )

      job && caption ? (
        <div style= color: "white" >
          <MediaPlayer src=job.media_url caption=caption />
        </div>
      ) : (
        <img  src="https://dummyimage.com/300x300" />
      )
      <div style= color: "white" >
        <MediaUploader />
      </div>
    </>
  );

有人知道我在这里做错了什么吗？

【问题讨论】：

您是否检查过您的代码是否在useEffect 块中运行超过if (!job) return;？在您的情况下，useEffect 只有在设置了job 状态时才会运行，但我看不到它最初设置的位置。您的[job, setJob] = useState(...) 块最初将返回null，这意味着您的useEffect 中的代码不会被执行（过去if(!job) return）

我想我必须以某种方式通过 getServerSideProps 从/api/job/ 文件中获取job 数据，但不知道如何？

【参考方案1】：

我认为不需要使用.then((res) => res.text())，因为你想转换为json，你可以把它放在标题content-type : application/json 中，然后在函数中放置console.log()，如果没有数据，则显示结果检查 insomnia 或 postman 中的 api 以检查您是否得到任何结果

【参考方案2】：

Next Js 使用的是不与浏览器通信的节点服务器。

我建议使用库 nookies 将数据保存在 cookie 中并获取数据。

https://npm.io/package/nookies