如何使用本地存储中的值初始化选择标记

Question

我正在遍历从 GraphQl 服务器中挑选的一些 items。我有一个select 标签，我从localStorage 中选择其值，然后我将items 作为选项传递。

在我刷新页面之前它似乎工作正常，而不是从中选择初始值 localStorage，它选择items 的第一个选项作为value。

我希望我的初始值来自 localStorage，而不是我正在迭代的 items。

这里是选择元素

class Header extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      currency: 'USD',
      cartItems: [],
      itemInCart: false,
    };
  }

  componentDidUpdate() {
    localStorage.setItem("cartItems", JSON.stringify(this.state.cartItems))
  }

  addToCart = (product) => {
    const alreadyInCart = this.state.cartItems.some(item => item.id === product.id)
    if( alreadyInCart ) {
      this.setState({ itemInCart: true })
      setTimeout(() => {
        this.setState({ itemInCart: false });
      }, 3000)
    } else {
      product.count = 1;
      this.setState(prevState => ({
        cartItems: [...prevState.cartItems, product]
      }))
    }
  }

  removeFromCart = (id) => {
    this.setState(prevState => ({
      cartItems: prevState.cartItems.filter(item => item.id !== id)
    }))
  }

  onChange = (event) => {
    const { value } = event.target;
    localStorage.setItem('symbol', `${value}`)
    this.setState({ currency: value});
  }

  render() {
    console.log(this.state)
    const { currency } = this.state;
    return (
      <div>
        <nav>
          <div className="nav-ul">
            <Query query={GET_CATEGORIES}>
              { ({ loading, data }) => {
                if (loading) return null;
                return data.categories.map((category) => (
                  <Link to={`/${category.name}`} key={nanoid()} className="nav-li">{category.name.toUpperCase()}</Link>
                ));
              }}
            </Query>
          </div>
          <Link to='/'><img src={logo} alt="logo" /></Link>
          <div>
            {/* <Currency /> */}
            <select id="currency" onChange={this.onChange} value={localStorage.getItem('symbol')}>
              <Query query={GET_CURRENCIES}>
                { ({ loading, data }) => {
                  if (loading) return null;
                  return data.currencies.map((currency) => (
                    <option
                      key={nanoid()}
                      value={currency.label}
                    >
                      {`${currency.symbol} ${currency.label}`}
                    </option>
                  ));
                }}
              </Query>
            </select>
            <Link to='/cart'><img src={cart} alt="cart" /></Link>
          </div>
        </nav>
        { this.state.itemInCart && <p>Item already in cart</p>}
        <Routes>
          <Route path="/" element={<Product homepage="all" currency={currency} addToCart={this.addToCart}/>} /> //the issue is here
          <Route path="/:category" element={<Product currency={currency} addToCart={this.addToCart}/>} />
          <Route path="/product/:id" element={ <ProductDetail currency={currency} addToCart={this.addToCart} />} />
          <Route path="/cart" element={ <Cart cartItems={this.state.cartItems} /> }/>
        </Routes>
      </div>
    );
  }
}

export default Header;

这是将值添加到本地存储的函数

onChange = (event) => {
    const { value } = event.target;
    localStorage.setItem('symbol', `${value}`)
    this.setState({ currency: value});
  }

任何帮助将不胜感激。

Answer 1

我无法重现您的代码，但我建议您采用稍微不同的方法，这可能会有所帮助。

我会将 symbol 作为有状态变量提供，该变量根据存储在 localStorage 中的值或默认值进行初始化。

const [symbol, setSymbol] = useState(localStorage.getItem('symbol') ?? "default");

然后，我将使用 useEffect 钩子（或 componentDidUpdate 方法，如果您使用类）集成一个副作用，该方法会在每次符号变量变化

useEffect(() => {
    localStorage.setItem('symbol', symbol);
}, [symbol]); // runs on mounting and on each symbol update

那么，onChange() 函数将只负责触发 setSymbol

const onChange = (event) => {
    const { value } = event.target;
    setSymbol(value);
    // ...
}

然后，您可以像其他符号一样将符号视为有状态变量，知道每次它发生变化时，它也会存储在 localStorage 中，并且每次初始化组件时都会读取 localStorage 中的值最初。