React中从列表页传API值到编辑页下拉框的实现疑问

一、Autocomplete默认选中的写法修正 #

你直接把ATplantID（数字2）放进useState是不对的，因为Material UI的Autocomplete组件需要选中的是下拉选项数组里的完整对象，不是单独的ID值。正确的做法应该是：

1. 先从localStorage取出ID，注意转成数字（因为localStorage存的都是字符串）：

const savedPlantId = localStorage.getItem('ATplantID') ? Number(localStorage.getItem('ATplantID')) : null;

2. 初始化state为null，等下拉选项数据加载完成后，再匹配对应的对象：

const [selectedPlant, setSelectedPlant] = useState(null);
const { data: plantOptions } = useApi('/api/plant-options'); // 假设这是你的useApi获取下拉数据

useEffect(() => {
  if (plantOptions && savedPlantId) {
    // 从选项数组里找到ID匹配的对象
    const matchedPlant = plantOptions.find(plant => plant.id === savedPlantId);
    setSelectedPlant(matchedPlant);
  }
}, [plantOptions, savedPlantId]);

3. 最后把selectedPlant传给Autocomplete的value属性：

<Autocomplete
  options={plantOptions || []}
  value={selectedPlant}
  onChange={(event, newValue) => setSelectedPlant(newValue)}
  // 其他配置项，比如getOptionLabel等
  renderInput={(params) => <TextField {...params} label="选择工厂" />}
/>

二、关于用localStorage传递值的合理性 #

不推荐用localStorage来做页面间的临时传值，原因有两个：

• localStorage是持久化存储，这个值会一直留在浏览器里，除非手动清除或者代码删除，后续打开页面可能会意外带上旧的ID值，导致逻辑错误。
• 传值逻辑不清晰，其他维护者很难快速找到ID的传递路径。

更合适的替代方案：

• 用路由参数传递：比如跳转时用navigate(/edit-plant/${plantId})，在新增/编辑页用useParams()获取plantId，再匹配下拉选项。
• 用路由state传递：跳转时携带临时状态：navigate('/edit-plant', { state: { plantId: 2 } })，目标页用useLocation().state?.plantId获取。
• 用全局状态管理：如果项目里有Redux、Zustand这类状态库，可以把plantId存在全局状态中，跳转后直接从状态里取。

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