如何在React Native中通过API批量更新表格所有行的指定列值

现有代码核心问题 #

• 未校验请求是否成功，且没有同步更新前端表格的数据源，就算接口调用成功，页面也不会显示更新后的结果
• 多数符合RESTful规范的PUT接口是针对单个资源设计的，直接请求PUT /users通常不支持批量更新所有条目指定字段，需先确认后端接口的支持逻辑

场景1：后端已支持PUT /users批量更新所有条目的指定字段 #

优化后的代码如下：

update(e) {
  e.preventDefault();
  // 提前校验要更新的字段值是否存在
  if (!this.state.status) {
    console.log('缺少要更新的目标字段值');
    return;
  }
  fetch("http://localhost:3000/users", {
    method: "PUT",
    headers: {
      "content-type": "application/json",
      "accept": "application/json"
    },
    body: JSON.stringify({
      status: this.state.status // 此处替换为你实际要更新的text字段名
    })
  })
  .then(response => {
    // 先判断请求是否正常响应
    if (!response.ok) throw new Error('请求异常，状态码：' + response.status);
    return response.json();
  })
  .then(response => { 
    console.log('更新成功', response);
    // 同步更新本地表格数据源，触发页面重渲染
    const updatedList = this.state.userList.map(item => ({
      ...item,
      status: this.state.status // 此处替换为你实际要更新的text字段名
    }));
    this.setState({ userList: updatedList });
  })
  .catch(err => { 
    console.error('更新出错：', err); 
  });
}

注意：上述代码中的userList是你渲染表格的数据源变量，如果你本地的变量名不同，需要替换成你实际使用的变量名

场景2：后端仅支持单条更新（PUT请求需指定资源ID） #

可以用Promise.all批量发起所有条目的更新请求，代码如下：

update(e) {
  e.preventDefault();
  if (!this.state.status || !this.state.userList?.length) {
    console.log('缺少更新参数或无可用数据');
    return;
  }
  // 生成所有单条更新的请求实例
  const updateTaskList = this.state.userList.map(item => 
    fetch(`http://localhost:3000/users/${item.id}`, {
      method: "PUT",
      headers: {
        "content-type": "application/json",
        "accept": "application/json"
      },
      body: JSON.stringify({
        status: this.state.status // 此处替换为你实际要更新的text字段名
      })
    })
  );
  // 等待所有请求完成
  Promise.all(updateTaskList)
  .then(responses => Promise.all(responses.map(res => {
    if (!res.ok) throw new Error('单条更新请求失败');
    return res.json();
  })))
  .then(results => {
    console.log('所有条目更新完成', results);
    // 同步更新本地数据源
    const updatedList = this.state.userList.map(item => ({
      ...item,
      status: this.state.status
    }));
    this.setState({ userList: updatedList });
  })
  .catch(err => {
    console.error('更新过程出错：', err);
  });
}

调试建议 #

• 优先在浏览器开发者工具的「网络」面板查看请求的响应状态和返回内容，确认是否是后端接口报错导致更新失败
• 如果接口需要鉴权，记得在请求头中补充对应的Authorization字段

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