javascript - 使用效果不起作用，仅在刷新页面后起作用

Question

我在 React 应用程序中遇到 useEffect 问题。我尝试使用 useEffect 翻译输入中的占位符，这是我的代码:

const [age, setAge] = useState("");

  useEffect(() => {
    if (localStorage.myLanguage[7] == "p") {
      setAge("Translate One");
    } else {
      setAge("Translate Two");
    }
  });

这是我的输入:

<input
   onChange={handleChangeAge}
   value={titleAge}
   type="number"
   min="1"
   max="100"
   id="age"
   placeholder={age}
   name="age"
   required
></input>

这是有效的，因为在本地存储中它会发生变化，但是在页面上如果我想看到更改我必须刷新页面。当用户在选择器中切换语言后，我需要这个工作。你能帮我吗？

Answer 1

试试这个:

  useEffect(() => {
if (localStorage.myLanguage[7] == "p") {
  setAge("Translate One");
} else {
  setAge("Translate Two");
}
  }, [localStorage.myLanguage]);

每次数组 localStorage.myLanguage 更改时都应该运行。让我知道它是否有效，因为我当然没有用你的代码尝试过。如果它抛出一个错误，指出长度已更改，则执行以下操作:

[localStorage.myLanguage.join(',')]