如何设置在反应中选择的按钮默认值？

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 键的名称。