表单数据无法存入localStorage问题求助

核心问题1：localStorage键名不匹配 #

在handleSubmit中，你存入localStorage的键是playerData，但更新playerData状态时却读取了不存在的players键，导致状态更新异常；同时如果newPlayers为空，就会让localStorage存进空数组。

核心问题2：买入金额解析逻辑有漏洞 #

parseInt解析失败时会返回NaN，此时if (name && buyIn)的条件不成立，数据无法被加入newPlayers，最终导致localStorage存入空数组。需要指定解析进制并判断是否为有效数字。

核心问题3：useEffect依赖冗余 #

setPlayerData和setNumPlayers是React内置的状态更新函数，本身是稳定不变的，不需要加入useEffect的依赖数组。

修复后的代码 #

修正后的useEffect：

const [numPlayers, setNumPlayers] = useState(2);
const [players, setPlayers] = useState([]);
const [playerData, setPlayerData] = useState([]);

useEffect(() => {
  // 组件挂载时加载本地存储数据
  const storedData = localStorage.getItem("playerData");
  if (storedData) {
    const parsedData = JSON.parse(storedData);
    setPlayerData(parsedData);
    setNumPlayers(parsedData.length);
  }
}, []); // 移除冗余依赖

修正后的handleSubmit：

const handleSubmit = (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const newPlayers = [];
  for (let i = 1; i <= numPlayers; i++) {
    const name = formData.get(`player${i}-name`);
    // 指定10进制解析，避免异常情况
    const buyIn = parseInt(formData.get(`player${i}-buy-in`), 10);
    // 确保姓名非空、买入金额为有效数字
    if (name?.trim() && !isNaN(buyIn)) {
      newPlayers.push({ name: name.trim(), buyIn });
    }
  }
  setPlayers(newPlayers);
  localStorage.setItem("playerData", JSON.stringify(newPlayers));
  // 直接用已生成的newPlayers更新状态，无需重复读取localStorage
  setPlayerData(newPlayers);
  console.log(newPlayers);
};

额外检查项 #

• 确认表单输入框的name属性严格匹配player${i}-name和player${i}-buy-in格式，比如第一个玩家的姓名输入框需设置name="player1-name"，买入金额输入框设置name="player1-buy-in"。
• 如果玩家数量是动态调整的，确保numPlayers状态在提交前已经同步更新为最新数值。

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