javascript - 映射获取的数据

Question

我正在尝试在 React 中构建一个 TreeNode 函数，该函数构建一些数据的树结构。

我有假数据作为起点:

const fakeData = {
 "1234": {
   id: "1234",
   name: "Division",
   address: "string",
   childNodes: []
  }
};

当我展开“id”为 1234 的“Division”节点时，我想获取该节点的子节点。所以我的 fakeData 扩展到如下所示:

我正在使用 fetch() 方法来获取数据，但我不确定如何将该数据传递给 Promise 的resolve() 方法。现在我正在这样做:

function fakeAjax(url, id) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(res => res.json())
      .then(result => {
        const nodes = result.map(node => node.id);
        resolve(fakeData[id].childNodes.map(nodes));
      });
  });
}

function fetchChildNodes(id) {
  return fakeAjax(`someUrl`, id);
}

function TreeNode({ id, name }) {
  const [childNodes, setChildNodes] = useState(null);

  // Toggle our display of child nodes
  const toggleExpanded = useCallback(() => {
      fetchChildNodes(id)
        .then(nodes => setChildNodes(nodes.map(node => <TreeNode {...node} />)))
    }
  }, [childNodes]);

但这并没有将相关数据传递给解析方法。我做错了什么吗？

Answer 1

有几件事跳出来:

1. 您的代码正在使用 explicit promise creation anti-pattern 。 fetch 返回一个 Promise，无需将 new Promise 包裹在它周围。这不是问题，但它是a问题，尤其是因为fakeAjax的编写方式，如果ajax调用失败，fakeAjax返回的promise > 永远不会被拒绝(也永远不会被实现，它只是永远处于待定状态)。

2. 您正在调用 map 并传入一个非函数作为映射函数:

   const nodes = result.map(node => node.id);
   resolve(fakeData[id].childNodes.map(nodes));
   // Here −−−−−−−−−−−−−−−−−−−−−−−−−−−−^
   

   这没有任何意义。 map 接受函数，而不是数组。

3. 您的代码在 fetch API 中受到了攻击，几乎其他人也受到了攻击:您需要检查请求是否在 HTTP 级别工作。 fetch 仅在出现网络错误时拒绝，而非 HTTP 错误(更多信息请参阅我的博客 here)。

4. 我假设您的 ajax 调用返回实际的节点数据，您应该将其直接传递给 TreeNode，而不是修改(当然也不会变成仅包含 id 的数组> 值)。

所以类似:

function fetchJSON(url) {
    return fetch(url)
      .then(res => {
          if (!res.ok) {
              throw new Error("HTTP error " + res.status);
          }
          return res.json();
      });
}

function fetchChildNodes(id) {
    return fetchJSON(`someUrl`, id);
}

节点数据到 TreeNode 的映射发生在 TreeNode 中，因此我认为您不需要在 fetchChildNodes 中执行任何操作。