使用useState Hook时的变量声明问题及解决方案正确性咨询

你的变通写法是错误的 #

你最初的代码报错，核心原因是函数参数title是只读的const变量，同时你又用const [title, setTitle]声明了同名的const状态变量，JS不允许同一作用域重复声明const变量，所以触发语法错误。

而你的变通写法里，[title, setTitle] = useState(title);本质是在给参数title（const类型）重新赋值，这违反了const变量不可修改的规则，运行时会直接抛出Assignment to constant variable的错误，根本无法正常执行。

正确的写法 #

解决思路很直接：给状态变量换个和参数不重名的名字，比如localTitle，彻底避开命名冲突：

const ExpenseItem = ({ date, title, amount }) => {
  // 用不同变量名区分props传入的title和组件内部状态的title
  const [localTitle, setLocalTitle] = useState(title);

  const clickHandler = () => {
    setLocalTitle("updated");
  };

  // 渲染时使用状态变量localTitle
  return (
    <div>
      <h2>{localTitle}</h2>
      <p>{date.toISOString()}</p>
      <p>${amount}</p>
      <button onClick={clickHandler}>更新标题</button>
    </div>
  );
};

这种写法既符合JS语法规则，也清晰区分了外部传入的props和组件内部维护的状态，逻辑更直观。

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