如何从 localStorage 中获取 key 的值并通过 hooks 将其输入？

Question

抱歉，我才刚刚开始学习 hooks。我无法正确编写它：在页面加载时，必须从 localStorage 获取键 appData 的值并将其放入输入中。

import './App.css';
import { useState, useEffect } from 'react';

export default function App() {
  const [appData, setValue] = useState('');
  
  useEffect(() => localStorage.setItem('appData', appData), [appData]);
 
  return (
    <div>
      React Marathon, appData: <input size='5' defaultValue={appData}></input>
    </div>
  );
}

Answer 1

只需将初始值设置为localStorage值

const [appData, setValue] = useState(localStorage.getItem('appData') || '')

Answer 2

import './App.css';
import { useState, useEffect } from 'react';
export default function App() {  
  const [appData, setValue] = useState("");

  useEffect(() => {
    if(!localStorage.getItem('appData')) {
      localStorage.setItem('appData', appData)
    }
  }, []);
  useEffect(() => setValue(localStorage.getItem('appData')), []);

  return (
    <div>
      React Marathon, appData: <input size='5' defaultValue={appData}></input>
    </div>
  );
}

如何从 localStorage 中获取 key 的值并通过 hooks 将其输入？

How to fetch a value of key from localStorage and put it to input by hooks?

reactjs

react-hooks

use-effect