React Todo List多用户数据推拉问题：API推送无法指定JSON Path

以下是几个适合React项目的简便方案，解决jsonbin.io推送时无法按用户过滤导致覆盖全量数据的问题：

方案一：调整数据结构，按用户邮箱拆分存储节点 #

修改现有JSON结构，将任务列表按用户邮箱作为key进行分组，这样可以通过PATCH请求仅更新指定用户的任务节点，避免覆盖全量数据：

调整后的数据结构 #

{
  "moduleAccess": {
    "userTasks": {
      "campbell@yahoo.com": [
        {
          "id": 0,
          "task_name": "Call mom",
          "due_date": 44875,
          "completed": true
        }
      ],
      "palsner593@gmail.com": [
        {
          "id": 1,
          "task_name": "Buy eggs",
          "due_date": 44880,
          "completed": false
        }
      ]
    }
  }
}

React中拉取与推送代码示例 #

拉取用户任务

async function loadData(userEmail) {
  const jsonPath = `$..userTasks.${userEmail}`;
  const url = 'https://api.jsonbin.io/v3/b/*binid*?meta=false';
  const response = await fetch(url, {
    method: "GET",
    headers: {
      "X-Master-Key": key,
      "X-JSON-Path": jsonPath
    }
  });
  const data = await response.json();
  setTasks(data || []);
}

推送用户任务（仅更新指定用户节点）

async function updateUserTasks(userEmail, updatedTasks) {
  const url = 'https://api.jsonbin.io/v3/b/*binid*';
  await fetch(url, {
    method: "PATCH",
    headers: {
      "X-Master-Key": key,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      [`moduleAccess.userTasks.${userEmail}`]: updatedTasks
    })
  });
}

方案二：拉取全量数据，前端过滤+合并更新 #

如果不想修改现有数据结构，可以采用「拉取全量→前端过滤→合并更新→推送全量」的逻辑，适合数据量较小的小型应用：

React中同步代码示例 #

async function syncUserTasks(userEmail, updatedUserTasks) {
  // 1. 拉取全量任务数据
  const fullDataUrl = 'https://api.jsonbin.io/v3/b/*binid*?meta=false';
  const fullResponse = await fetch(fullDataUrl, {
    method: "GET",
    headers: { "X-Master-Key": key }
  });
  const fullData = await fullResponse.json();

  // 2. 保留其他用户任务，替换当前用户的任务
  const otherUsersTasks = fullData.moduleAccess.tasks.filter(task => task.email !== userEmail);
  const newFullTasks = [...otherUsersTasks, ...updatedUserTasks];

  // 3. 推送更新后的全量数据
  await fetch(fullDataUrl, {
    method: "PUT",
    headers: {
      "X-Master-Key": key,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      moduleAccess: { tasks: newFullTasks }
    })
  });
}

方案三：为每个用户创建独立的Bin #

利用jsonbin.io支持多Bin的特性，为每个登录用户创建专属Bin存储任务，数据完全隔离，操作逻辑最简洁：

React中核心代码示例 #

创建用户专属Bin

async function createUserBin(userEmail, initialTasks = []) {
  const url = 'https://api.jsonbin.io/v3/b';
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "X-Master-Key": key,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ tasks: initialTasks })
  });
  const data = await response.json();
  // 将Bin ID存入本地存储，关联用户邮箱
  localStorage.setItem(`userBin_${userEmail}`, data.metadata.id);
  return data.metadata.id;
}

拉取用户专属任务

async function loadUserTasks(userEmail) {
  let binId = localStorage.getItem(`userBin_${userEmail}`);
  // 若用户无专属Bin则创建新的
  if (!binId) {
    binId = await createUserBin(userEmail);
    setTasks([]);
    return;
  }
  const url = `https://api.jsonbin.io/v3/b/${binId}?meta=false`;
  const response = await fetch(url, {
    method: "GET",
    headers: { "X-Master-Key": key }
  });
  const data = await response.json();
  setTasks(data.tasks);
}

推送用户任务

async function pushUserTasks(userEmail, updatedTasks) {
  const binId = localStorage.getItem(`userBin_${userEmail}`);
  const url = `https://api.jsonbin.io/v3/b/${binId}`;
  await fetch(url, {
    method: "PUT",
    headers: {
      "X-Master-Key": key,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ tasks: updatedTasks })
  });
}

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