React函数组件中修改count值失败，代码存在哪些问题？

存在的问题 #

• 状态更新类型不匹配：setUser传入的是数组，但初始状态user是包含firstName、lastName、address的对象，直接替换成数组会导致后续访问user.address时抛出错误（数组没有address属性）。
• 嵌套状态更新违背不可变性原则：React状态是不可变的，修改嵌套的count值时需要逐层拷贝原对象/数组，原代码没有正确拷贝user对象、address数组及数组内的对象，无法触发组件重新渲染。
• JSX语法错误：返回的<h1>标签未闭合，会导致React编译失败。

修复后的代码示例 #

import { useState } from 'react';

const UserComponent = () => {
  const [user, setUser] = useState({
    firstName: "AA",
    lastName: "BB",
    address: [{name: "AA", count: 0}]
  });

  const plus = () => {
    setUser(prevUser => ({
      ...prevUser,
      address: prevUser.address.map((item, index) => 
        index === 0 ? { ...item, count: item.count + 1 } : item
      )
    }));
  };

  return <h1>{user.address[0].count}</h1>;
};

export default UserComponent;

修复要点 #

• 用函数式更新setUser(prevUser => ...)，确保获取最新状态值，避免闭包问题。
• 逐层拷贝不可变数据：先拷贝user对象保留原有属性，再拷贝address数组，最后拷贝目标数组项并更新count。
• 修正JSX标签闭合问题，保证语法合规。

内容的提问来源于stack exchange，提问作者Front-End Developer