ReactJS中更新对象值并保留键值对，实现评分持久化到LocalStorage

核心问题分析 #

你的代码存在几个关键问题导致状态无法正确更新和持久化：

1. 初始状态未从LocalStorage加载：组件挂载时直接使用硬编码初始值，未读取已保存的评分数据。
2. 状态更新逻辑冗余且有误：冗长的if-else分支不仅冗余，还在else分支错误地将值存入键2而非5；同时未使用函数式更新，可能导致状态更新不及时。
3. LocalStorage仅初始化时保存一次：useEffect依赖数组为空，仅在组件首次挂载时保存初始状态，后续状态变化不会触发保存。
4. 文本框处理逻辑错误：使用this.value在函数组件中无效，且未绑定对应状态值。
5. 缺少唯一key属性：map生成按钮时未添加key，可能引发React渲染警告。

修复后的完整代码 #

import React, { useState, useEffect } from "react";
import "./rating_button.css";

function Rating(props) {
  // 从LocalStorage加载初始状态，若无则使用默认值
  const getInitialRate = () => {
    const savedRate = localStorage.getItem(props.user);
    return savedRate ? JSON.parse(savedRate) : { 1: "", 2: "", 3: "", 4: "", 5: "" };
  };

  const [rate, setRate] = useState(getInitialRate);

  // 使用函数式更新确保获取最新状态，简化更新逻辑
  const handleValueChange = (value) => {
    setRate(prevRate => ({
      ...prevRate,
      [props.id]: value
    }));
  };

  // 每当rate或user变化时，同步保存到LocalStorage
  useEffect(() => {
    if (props.user) {
      localStorage.setItem(props.user, JSON.stringify(rate));
    }
  }, [rate, props.user]);

  const { inputType, scale } = props;

  if (inputType === "text") {
    return (
      <textarea
        value={rate[props.id] || ""}
        onChange={(e) => handleValueChange(e.target.value)}
      />
    );
  }

  return (
    <>
      {scale.map((item) => (
        <button
          key={item}
          className="rbtn"
          onClick={() => handleValueChange(item)}
        >
          {item}
        </button>
      ))}
    </>
  );
}

export default Rating;

关键优化点说明 #

• 状态初始化：通过getInitialRate函数优先读取LocalStorage中的数据，实现页面刷新后状态持久化。
• 状态更新：使用setRate的函数式更新形式，确保每次更新都基于最新的状态快照，避免异步更新导致的状态不一致；同时用[props.id]动态设置对象键，替代冗余的if-else分支。
• LocalStorage同步：将rate和props.user加入useEffect的依赖数组，确保状态或用户标识变化时立即保存数据。
• 文本框修复：绑定value为对应问题ID的状态值，使用e.target.value获取输入内容，符合函数组件操作规范。
• key属性：为map生成的按钮添加唯一key，避免React渲染警告。

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