React中点击跳转页面后如何仅更新指定记录的输入框值？

问题场景 #

React项目中，网格组件渲染包含文本、输入框等多种数据类型的数据集，其中某列映射为带默认值的输入框。需求为：点击某条记录跳转到新页面，点击该页面的返回按钮后，仅更新原网格中对应ID记录的输入框名称，但当前操作会修改所有记录的输入框值。

问题根源 #

当前通过全局Context存储的newValue是单一字符串，未与具体记录的ID关联，导致所有输入框都读取同一个全局值，触发全量更新。

解决方案 #

通过修改全局Context的存储结构，关联目标记录ID与更新值，实现精准更新：

1. 调整全局Context的存储结构 #

将原本单一的newValue改为存储包含目标ID和对应值的对象：

import { createContext, useState } from 'react';

const GlobalContext = createContext();

export const GlobalProvider = ({ children }) => {
  // 存储格式：{ targetId: 目标记录ID, value: 要更新的输入框值 }
  const [updateInfo, setUpdateInfo] = useState(null);

  return (
    <GlobalContext.Provider value={{ updateInfo, setUpdateInfo }}>
      {children}
    </GlobalContext.Provider>
  );
};

export default GlobalContext;

2. 修改Test页面的返回逻辑 #

点击返回按钮时，将目标ID和新值存入Context：

const Test = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const newId = location.state?.id;
  const { setUpdateInfo } = useContext(GlobalContext);

  const handleClick = () => {
    // 保存要更新的记录ID和对应值
    setUpdateInfo({ targetId: newId, value: "John Spencer" });
    navigate("/");
  };

  return (
    <>
      <h2>Test Page</h2>
      <p>ID: {newId}</p>
      <button onClick={handleClick}>Go Back</button>
    </>
  );
};

3. 调整Grid组件的输入框渲染逻辑 #

仅当当前记录ID与Context中存储的目标ID匹配时，才替换输入框的默认值：

const Grid = (props) => {
  let colConfig = props.GridConfig.column_config;
  let gridData = props.GridData?.data;
  const { updateInfo } = useContext(GlobalContext);
  const navigate = useNavigate();

  return (
    // ...其他网格渲染代码
    {colConfig[cIndex].data_type === "input_text" &&
      !colConfig[cIndex].cell_click_callback && (
        <input
          type="text"
          defaultValue={
            // 判断当前记录ID是否匹配目标ID，再决定显示值
            updateInfo && updateInfo.targetId === rowData[0].id 
              ? updateInfo.value 
              : colData
          }
        />
      )}
    // ...其他网格渲染代码
  );
};

4. 可选优化：清空临时更新信息 #

回到首页后清空Context中的updateInfo，避免后续渲染时保留旧值：

// 在App组件中添加路由监听
import { useLocation } from 'react-router-dom';
import { useContext, useEffect } from 'react';
import GlobalContext from './GlobalContext';

function App() {
  const location = useLocation();
  const { setUpdateInfo } = useContext(GlobalContext);

  useEffect(() => {
    if (location.pathname === "/") {
      setUpdateInfo(null);
    }
  }, [location.pathname, setUpdateInfo]);

  // ...原有渲染代码
}

效果验证 #

完成上述修改后，点击返回按钮时，只有与目标ID匹配的记录输入框会更新为新值，其他记录保持原有默认值，实现了精准更新的需求。

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