javascript - useState/useReducer 的初始化函数必须是纯函数吗？-6ren

javascript - useState/useReducer 的初始化函数必须是纯函数吗？

转载作者：行者123 更新时间：2023-12-02 15:46:42

<分区>

Hier 是我遇到的一个问题的例子:

import ReactDOM from "react-dom/client";
import React, { useState, useEffect } from "react";

const App = () => {
  // problematic
  const [radio, setRadio] = useState(1);
  useEffect(() => {
    const localRadio = localStorage.getItem('radio');
    if (localRadio) {
      setRadio(+localRadio);
    }
  }, []);

  // My "solution" using an initializer to read from localStorage
  // const [radio, setRadio] = useState(() => {
  //   const localRadio = localStorage.getItem('radio');
  //   return localRadio ? +localRadio : 1;
  // });

  useEffect(() => {
    localStorage.setItem('radio', radio);
  }, [radio]);
  const radioChangeHandler = (event) => {
    setRadio(+event.target.value);
  };
  return (
    <div>
      <h1>useState initializer demo</h1>
      <div className="radio-group" onChange={radioChangeHandler}>
        <input
          type="radio"
          value="1"
          checked={radio === 1}
          id="language1"
          name="languageChoice"
        />
        <label htmlFor="language1">Javascript</label>
        <input
          type="radio"
          value="2"
          checked={radio === 2}
          id="language2"
          name="languageChoice"
        />
        <label htmlFor="language2">HTML</label>
        <input
          type="radio"
          value="3"
          checked={radio === 3}
          id="language3"
          name="languageChoice"
        />
        <label htmlFor="language3">CSS</label>
      </div>
    </div>
  );
};

const container = document.querySelector("#root");
const root = ReactDOM.createRoot(container);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

想法是每次 radio 改变时写入 localStorage。当我打开/刷新网站时，它应该从 localStorage 读取并设置值。但是后来我遇到了一个问题，即使用 [radio] 的 useEffect 总是会覆盖另一个，所以无论一开始在 localStorage 中写了什么，我总是得到 1 作为 radio 的值。

(我刚刚发现如果我删除 StrictMode 代码实际上可以工作，我想我之前已经测试过它......但是 React 希望应用程序在渲染两次时也能工作。)

我的解决方案是使用初始化函数从 localStorage 中读取(注释掉的代码)。它工作正常，我为自己感到骄傲。然后我读了https://beta.reactjs.org/apis/react/useState#parameters

If you pass a function as initialState, it will be treated as an initializer function. It should be pure, should take no arguments, and should return a value of any type.

也在 https://beta.reactjs.org/apis/react/useReducer#my-reducer-or-initializer-function-runs-twice 上

Only component, initializer, and reducer functions need to be pure.

这是否意味着我不应该在初始化程序中读取 localStorage(或从 API 获取数据)？什么是正确的方法？

全站热门文章

首页

博学

6Ren·AI

商城

javascript - useState/useReducer 的初始化函数必须是纯函数吗？