ReactJS 如何查找state数组中指定id的用户并更新后放回原数组

1. 声明所需的state #

import { useState } from 'react';

function UserPage() {
  // 原用户列表state
  const [users, setUsers] = useState([
    {
      "userId": 1,
      "id": 1,
      "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
      "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
    },
    {
      "userId": 1,
      "id": 2,
      "title": "qui est esse",
      "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
    },
    // 其余用户数据
  ]);
  // 存储当前待编辑的单条用户state
  const [currentEditUser, setCurrentEditUser] = useState(null);
}

2. 根据ID查找目标用户并存入单独state #

const getTargetUser = (targetId) => {
  const foundUser = users.find(item => item.id === targetId);
  if (foundUser) {
    setCurrentEditUser(foundUser);
  }
}

3. 修改单独存储的用户数据 #

修改时遵循React不可变原则，不能直接修改原对象，需返回新的对象引用：

// 示例：修改用户的title字段
const updateEditField = (fieldName, newValue) => {
  setCurrentEditUser(prev => ({
    ...prev,
    [fieldName]: newValue
  }))
}

4. 把更新后的数据写回原用户列表 #

const saveEditResult = () => {
  if (!currentEditUser) return;
  // 生成新的用户数组，匹配对应ID的项替换为更新后的数据
  setUsers(prevList => prevList.map(item => {
    return item.id === currentEditUser.id ? currentEditUser : item
  }))
  // 保存完成后可清空当前编辑状态，按需选择
  setCurrentEditUser(null);
}

注意事项 #

所有对state的操作都不能直接修改原数组、原对象，必须返回新的引用值，否则React无法检测到状态变化，不会触发视图重渲染。

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