React页面刷新后保留下拉选中值问题（基于Gatsby）

你的代码存在三个核心问题导致刷新后丢失选中值：

• 初始state固定为"black"，未从URL查询参数读取初始值
• 所有option都加了selected属性，会干扰select的选中逻辑
• 未监听URL参数变化，无法响应浏览器前进/后退等操作

以下是修复后的完整代码：

import React, { useState, useEffect } from "react";
import { navigate, useLocation } from "gatsby";

export default function IndexPage() {
  const location = useLocation();
  // 从URL查询参数初始化state，无参数时用默认值"black"
  const [data, setData] = useState(() => {
    const searchParams = new URLSearchParams(location.search);
    return searchParams.get("location") || "black";
  });

  const Vdata = [
    { title: "black" },
    { title: "red" }
  ];

  const handleChange = (value) => {
    setData(value);
    navigate(`/?location=${value}`);
  };

  // 监听URL参数变化，同步更新state（处理浏览器前进/后退）
  useEffect(() => {
    const searchParams = new URLSearchParams(location.search);
    const paramValue = searchParams.get("location");
    if (paramValue && paramValue !== data) {
      setData(paramValue);
    }
  }, [location.search, data]);

  return (
    <div className="grid place-items-center">
      <select
        value={data}
        autocomplete="off"
        className="border p-2 shadow-xl"
        onChange={(event) => handleChange(event.target.value)}
      >
        {Vdata.map((item) => (
          <option key={item.title} value={item.title}>
            {item.title}
          </option>
        ))}
      </select>
      <p>{window.location.href}</p>
    </div>
  );
}

关键修改说明：

• 使用useLocation钩子获取当前路由信息，Gatsby内置该钩子无需额外安装
• 初始化state时，通过URLSearchParams解析URL查询参数，优先取URL中的location值，无参数时用默认值
• 移除所有option的selected属性，由select的value属性控制选中状态，避免冲突
• 添加useEffect监听URL查询参数变化，当参数改变时同步更新state，支持浏览器前进/后退操作
• 给option添加key属性，符合React列表渲染的规范

内容的提问来源于stack exchange，提问作者Amit