React新增好友后如何将返回id传递给onClickUpdate更新方法

请求URL出现[object Object]是典型的将JavaScript对象直接拼接到字符串路径中，对象隐式转换为字符串的结果。你的代码里有4处直接导致该问题的错误，还有几处会引发后续bug的问题，按下面的步骤修改即可：

具体错误与修复方案 #

1. 调用更新接口时参数传递完全错误 #

你定义的updateFriend服务需要接收两个参数：第一个是好友ID（用于拼接URL），第二个是更新的表单数据。但你在onClickUpdate中只传入了整个userFormData对象，导致服务层拿到的id形参就是整个表单对象，拼接到URL时自然会变成[object Object]，这是本次报错的直接原因。
修复onClickUpdate的传参：

const onClickUpdate = (event) => {
  event.preventDefault();
  // 传入两个参数：第一个是存在userFormData里的好友ID，第二个是表单数据
  friendService
    .updateFriend(userFormData.id, userFormData)
    .then(onSuccessUpdate)
    .catch(onErrorUpdate);
};

2. 服务层方法存在逻辑错误 #

• updateFriend和getFriendById里的data: (id, payload)是错误写法：JS括号内逗号分隔的多表达式只会返回最后一个值，且PUT请求的请求体只需要传表单数据，ID已经在URL路径中，不需要放在data里。
• getFriendById的请求方法写错了：根据ID查询好友详情是GET请求，你写成了PUT，后续调用必然报错。
• 新增成功后你调用setNewFriendInformation(response)时，如果addFriend接口返回的response.data.item是包含id字段的完整好友对象，而非纯ID值，会直接把整个对象存在userFormData.id字段，后续传参依然会拿到对象。

修复服务层代码：

let updateFriend = (id, payload) => {
  const config = {
    method: "PUT",
    data: payload, // 直接传表单数据即可
    url: `https://api.remotebootcamp.dev/api/friends/${id}`,
    withCredentials: true,
    crossdomain: true,
    headers: { "Content-Type": "application/json" },
  };
  return axios(config);
};

let getFriendById = (id) =>{
  const config = {
    method: "GET", // 修正为GET请求
    url: `https://api.remotebootcamp.dev/api/friends/${id}`,
    withCredentials: true,
    crossdomain: true,
    headers: { "Content-Type": "application/json" },
  }
  // 统一解包返回的业务数据
  return axios(config).then(res => res.data.item);
}

同时修正新增成功后的ID赋值逻辑，确保存到userFormData.id的是纯ID值：

const onSuccessAdd = (response) => {
  // 兼容两种返回格式：如果response是纯ID直接用，如果是好友对象就取id字段
  const newFriendId = typeof response === 'object' ? response.id : response;
  setNewFriendInformation(newFriendId);
  // 新增成功后如果需要拉取详情，传入纯ID即可
  // friendService.getFriendById(newFriendId).then(onSuccessGet).catch(onErrorGet);
  toastr.success("新增好友成功！");
  // 可选：跳转到带ID的编辑路由，刷新页面也不会丢失编辑状态
  navigate(`/friends/${newFriendId}`);
};

3. 路由与useParams使用错误 #

• useParams()返回的是所有路由参数组成的对象，不是参数本身，你直接把整个返回值存在friendId/peepId里，拿到的永远是对象，不是具体ID值。
• 路由配置顺序错误：静态路径new必须放在动态参数:personId前面，否则new字符串会被当成personId的值匹配。
• 父路由已经渲染了AddFriend组件，子路由又重复渲染同一个组件，会导致组件重复挂载、逻辑重复执行。

修复路由配置：

// 去掉重复渲染的父路由，静态路径放动态路由前面
<Route path="/friends/new" element={<AddFriend />} />
<Route path="/friends/:personId" element={<AddFriend />} />

修正useParams取值：

// 解构拿到具体的personId参数，重命名为friendId
const { personId: friendId } = useParams();

4. 其他冗余/错误代码清理 #

• 组件里写了两段完全一模一样的useEffect逻辑，删掉其中一段即可，避免重复赋值。
• 按钮的type属性拼写错误：是submit不是sumbit，拼写错误会触发表单默认提交、刷新页面。
• onSuccessGet里调用navigate()没有传路径参数，是无效调用，需要根据业务需求补全跳转路径，或者删掉多余逻辑。

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