React中setState调用导致formValues状态重置的问题解决

当仪表盘的用户输入字段变更时，需按以下逻辑修改formValues状态：

• 若formValues为空，创建包含用户标准值的对象并更新变更的输入字段；
• 若用户已存在于formValues中，更新对应字段的新值；
• 若用户不存在于formValues中，添加该用户并更新变更字段的新值。

原事件处理函数 #

const handleInputChange = (event, person) => {
        let new_form_val = {
            objectId: person._id,
            name: person.name,
            role: person.role,
            privilege: person.privilege,
            group: person.group
        };
    
        console.log("handle change function called")
    
    
        if (formValues.length == 0)
        {
            console.log("formValues is empty")
            new_form_val[event.target.name] = event.target.value
            console.log("adding", new_form_val)
            setFormValues([...formValues, new_form_val])
        }
            
    
        // console.log(event.target.value)
        
        console.log("Change target id", event.target.id)
        console.log("current formvalue before change", formValues)
    
        let form_val = formValues.find((item) => item.objectId == event.target.id)
    
        if (form_val) {
            console.log("person found in formValues", form_val)
    
            let index = formValues.indexOf(form_val)
            formValues[index][event.target.name] = event.target.value
            console.log("Changed already existing formvalue", formValues)
            setFormValues(formValues)

        } 
        else {
            new_form_val[event.target.name] = event.target.value
            console.log("new person in form value", new_form_val)
            setFormValues([...formValues, new_form_val])
        }
    
}

原数据获取与组件渲染逻辑 #

useEffect(() => {   
        // GARL: https: //bobbyhadz.com/blog/react-push-to-state-array
            setPeople([])
            console.log("get users effetct ran")
            
            axios.get('/api/getusers').then((response) => {
                response.data.forEach((item, index) => {
                    setPeople(oldStatusArray => {
                        return [...oldStatusArray, <Person
                            key={index}
                            id={index+1}
                            _id={item._id}
                            name={item.name}
                            role={item.role}
                            privilege_id={item.privilege}
                            group_id={item.group}
                            onChange={(event) => handleInputChange(event, item)}
                        />]
                    })
                
                }); 
            })

    }, []);

当前问题 #

每次触发onChange函数时，formValues状态会被重置，仅保留最新一次变更的用户数据。例如修改用户A、B、C的字段后，最终state中仅存在用户C的变更记录。尝试将formValues添加为useEffect的依赖项，会导致用户组件重复渲染。

1. 直接修改原状态数组：代码中formValues[index][event.target.name] = event.target.value直接修改了formValues原数组，React无法检测到这种变更；后续setFormValues(formValues)传递的是同一个数组引用，不会触发组件的正确更新。
2. 未使用函数式状态更新：当更新依赖当前状态时，直接使用formValues会因为闭包捕获旧值，导致状态更新丢失，无法累积多次变更。
3. 逻辑重复冗余：开头判断formValues.length == 0的逻辑与后续的find判断重复，可能导致重复添加用户或覆盖已有数据。
4. 组件渲染的key问题：useEffect中使用循环index作为Person组件的key，当数组顺序变化时会导致不必要的组件重渲染，且闭包可能导致onChange绑定的item数据异常。

修复后的handleInputChange函数 #

使用函数式状态更新确保获取最新的formValues，避免直接修改原状态，同时合并冗余逻辑：

const handleInputChange = (event, person) => {
  const { name, value } = event.target;
  // 基于传入的person创建基础用户对象
  const baseUser = {
    objectId: person._id,
    name: person.name,
    role: person.role,
    privilege: person.privilege,
    group: person.group
  };

  setFormValues(prevValues => {
    // 查找当前用户是否已存在
    const userIndex = prevValues.findIndex(item => item.objectId === person._id);
    
    if (userIndex !== -1) {
      // 用户存在：创建新数组，更新对应字段
      const updatedValues = [...prevValues];
      updatedValues[userIndex] = {
        ...updatedValues[userIndex],
        [name]: value
      };
      return updatedValues;
    } else {
      // 用户不存在：添加新用户并更新变更字段
      return [...prevValues, { ...baseUser, [name]: value }];
    }
  });
};

优化后的useEffect逻辑 #

一次性构建Person组件数组，使用用户的_id作为key确保稳定性，避免多次调用setPeople：

useEffect(() => {
  console.log("get users effect ran");
  axios.get('/api/getusers').then((response) => {
    // 一次性构建所有Person组件
    const newPeople = response.data.map(item => (
      <Person
        key={item._id} // 使用用户唯一ID作为key，避免index导致的问题
        id={item._id} // 这里将id改为用户的objectId，与formValues中的objectId对应
        _id={item._id}
        name={item.name}
        role={item.role}
        privilege_id={item.privilege}
        group_id={item.group}
        onChange={(event) => handleInputChange(event, item)}
      />
    ));
    setPeople(newPeople);
  });
}, []); // 依赖项为空，仅组件挂载时执行一次

关键优化点说明 #

• 函数式状态更新：setFormValues(prevValues => ...)确保每次更新都基于最新的状态值，避免闭包导致的旧值问题，解决状态重置丢失的问题。
• 不可变更新：始终创建新数组或新对象来更新状态，不直接修改原状态，保证React能正确检测到变更并触发渲染。
• 合并冗余逻辑：去掉了原代码中formValues.length ==0的判断，通过findIndex统一处理用户存在/不存在的情况，逻辑更简洁。
• 稳定的key：使用用户的唯一_id作为组件key，避免index带来的组件重渲染和数据绑定异常问题。

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