使用Redux Toolkit更新表单数据失败问题求助

点击更新按钮后状态显示成功，但前端数据未更新。使用Redux Toolkit，fetchForms需返回data.respond才能获取数据，怀疑fetchForms与updateForm存在兼容性问题。

问题根源分析 #

1. API接口返回值错误：PUT接口仅返回字符串提示，未返回更新后的完整表单对象，导致Redux无法匹配更新目标。
2. Action数据解析错误：updateForm用response.text()接收返回值，拿到的是字符串而非带_id的表单对象，无法在Reducer中匹配原数据。
3. Reducer匹配逻辑无效：用不存在的字符串_id去匹配原表单的_id，导致数组无变化。

修复步骤 #

1. 修改后端PUT接口，返回更新后的完整数据 #

将接口改为更新后查询并返回完整文档，确保前端拿到带_id的表单对象：

router.put("/:id", async (req, res) => {
  try {
    // 执行更新操作
    await data.updateOne(
      { _id: req.params.id },
      { $set: { ...req.body } }
    );
    // 查询更新后的完整表单数据
    const updatedForm = await data.findById(req.params.id);
    // 返回JSON格式的更新结果
    res.json(updatedForm);
  } catch (error) {
    // 返回错误状态码与信息
    res.status(500).json({ message: "cannot update form" });
  }
});

2. 修改updateForm Action，正确解析JSON返回值 #

把response.text()改为response.json()，确保拿到更新后的表单对象：

export const updateForm = createAsyncThunk(
  'data/update',
  async ({ dataId, updatedData }, { rejectWithValue }) => {
    try {
      const response = await fetch(`http://localhost:5000/autoroute/${dataId}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(updatedData),
      });
      // 检查请求是否成功
      if (!response.ok) {
        throw new Error('更新操作失败');
      }
      // 解析JSON格式的返回数据
      const updatedDataFromServer = await response.json();
      return updatedDataFromServer;
    } catch (error) {
      // 传递错误信息给Reducer
      return rejectWithValue(error.message);
    }
  }
);

3. 确认Reducer逻辑有效性 #

当前Reducer的匹配逻辑本身正确，修复前两步后，action.payload将是带_id的表单对象，即可正确替换数组中的对应项：

.addCase(updateForm.fulfilled, (state, action) => {
  state.status = 'succeeded';
  state.data = state.data.map(form =>
    form._id === action.payload._id ? action.payload : form
  );
})

额外验证建议 #

• 在updateForm的fulfilled回调中添加日志，确认action.payload的结构是否与fetchForms返回的表单对象一致：

  console.log('更新返回的表单数据：', action.payload);
  

• 确保fetchForms返回的data.respond数组中，每个表单对象都包含_id字段，保证匹配逻辑正常执行。

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