如何設置在反應中選擇的按鈕默認值？

Question

我有一個react code (snippet, not a complete code) ，如下所示，它顯示了時區列表。 單擊按鈕時，時區被選中並顯示所有程序的列表。

const timezones = [{label:"PT",timezone:"America/Los_Angeles"},{label:"NT",timezone:"America/St_Johns"}];

const Picker = (props) => {
    console.log(props.selectedTimezone);  // Line Z
    return(
       timezones.map((timezoneObject) => {
           console.log(timezoneObject.timezone);  // Line Y
          return <li><button className={`${timezoneObject.timezone === props.selectedTimezone ? 'selected' : ''}`}
             onClick={(e) => {
             e.preventDefault();
             props.onChange(timezoneObject.timezone);
          }}>{timezoneObject.label}</button></li>
       })
    )
}

我想要實現的是當頁面加載時，時區NT應該保持自動選擇，而無需單擊按鈕。 我已經console.log(props) at Line Z並且我在控制台上得到了NT但仍然class selected沒有被應用於NT timezone 。 Line Y prints ：

America/Los_Angeles
America/St_Johns

Answer 1

React 不會在請求之間存儲 state 信息。 每次刷新頁面時，state 也會刷新。 但是，您可以使用 LocalStorage 來完成此操作。

這是我在某處找到並適用於我正在從事的項目之一的小片段：

import { useEffect, useState } from 'react';

const useStickyState = (defaultValue, key) => {
  const [value, setValue] = useState(() => {
    const stickyValue = window.localStorage.getItem(key);
    return stickyValue !== null
      ? JSON.parse(stickyValue)
      : defaultValue;
  });

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

export default useStickyState;

然后在您的組件中，您可以像這樣使用它：

...
import useStickyState from '../../app/useStickyState';
...

const YourComponent = () => {
  const [timeZone, setTimeZone] = useStickyState('NT', 'timezone');
  ...
}

useStickyState的第一個參數是默認值，第二個參數是要使用的 LocalStorage 鍵的名稱。