无法在重新加载时保留状态

Question

我有一个搜索栏，当输入包名称时，它会呈现包的详细信息。问题出在重新加载时，它会返回到旧状态并且不再显示包详细信息。我有两个同级组件：main 和 navbar 以及一个 input，这是包名称。我尝试使用 sessionStorage 来保存状态，但没有用

function App() {
  const [input, setInput] = useState('');

  useEffect(() => {
    setInput(window.sessionStorage.getItem('input'));
  }, []);

  useEffect(() => {
    window.sessionStorage.setItem('input', input);
  }, [input]);

  return (
    <div className="App">
      <Navbar setInput={setInput} />
      <div className="sections">
        {input ? (
          <Main input={input} />
        ) : (
          <h1
            style={{
              color: 'black',
              position: 'absolute',
              top: '46%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
            }}
          >
            Search for a NPM package
          </h1>
        )}
      </div>
    </div>
  );
}

export default App;

Answer 1

如果不查看状态和会话存储的值，就很难看出导致错误的原因，但我猜你的问题与 JSON.parse 有关。尝试在 useEffect 和初始 state 值

中进行这些修改

function App() {
  const [input, setInput] = useState(sessionStorage.getItem('input') ? JSON.parse(sessionStorage.getItem('input') : '');

  useEffect(() => {
    if(sessionStorage.getItem('input')){
        setInput(JSON.parse(sessionStorage.getItem('input'));
    } 
  }, []);

  useEffect(() => {
    window.sessionStorage.setItem('input', input);
  }, [input]);

  return (
    <div className="App">
      <Navbar setInput={setInput} />
      <div className="sections">
        {input ? (
          <Main input={input} />
        ) : (
          <h1
            style={{
              color: 'black',
              position: 'absolute',
              top: '46%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
            }}
          >
            Search for a NPM package
          </h1>
        )}
      </div>
    </div>
  );
}

无法在重新加载时保留状态

Not able to retain state on-reload

reactjs

react-hooks