javascript - 附加获取的数据

Question

我正在尝试构建一个 TreeView 组件以响应，其中根据用户展开的节点获取树的数据。

问题

我想用来 self 的服务器的数据替换 handleChange 中的代码，以便我将获取的数据附加到 tree 状态。我如何通过 React 实现这一点？

我得到的数据可能是这样的:

{
  "children": [
    {
      "id": "2212",
      "parentId": "3321",
      "name": "R&D",
      "address": "homestreet"
    },
    {
      "id": "4212",
      "parentId": "3321",
      "name": "Testing",
      "address": "homestreet"
    }
  ]
}

我的代码

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import TreeView from "@material-ui/lab/TreeView";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import TreeItem from "@material-ui/lab/TreeItem";

const useStyles = makeStyles({
  root: {
    height: 216,
    flexGrow: 1,
    maxWidth: 400
  }
});

export default function FileSystemNavigator() {
  const classes = useStyles();

  const initialData = {
    root: [
      {
        id: "1",
        label: "Applications"
      }
    ],
  };

  const [tree, setTree] = useState(initialData);

  const handleChange = (event, nodeId) => {
    setTimeout(() => {
      const newTree = {
        ...tree,
        [nodeId]: [
          {
            id: "2",
            label: "Calendar"
          },
          {
            id: "3",
            label: "Settings"
          },
          {
            id: "4",
            label: "Music"
          }
        ]
      };

      setTree(newTree);
    }, 1000); // simulate xhr
  };

  const renderTree = children => {
    return children.map(child => {
      const childrenNodes =
        tree[child.id] && tree[child.id].length > 0
          ? renderTree(tree[child.id])
          : [<div />];

      return (
        <TreeItem key={child.id} nodeId={child.id} label={child.label}>
          {childrenNodes}
        </TreeItem>
      );
    });
  };

  return (
    <TreeView
      className={classes.root}
      defaultCollapseIcon={<ExpandMoreIcon />}
      defaultExpandIcon={<ChevronRightIcon />}
      onNodeToggle={handleChange}
    >
      {renderTree(tree.root)}
    </TreeView>
  );
}

Answer 1

如果我没理解错的话，您想将 API 调用的“假”setTimeout 实现替换为使用 fetch 的真实调用。

在这种情况下，就像在 handleChange 处理程序中调用 fetch 并使用返回的新项更新状态一样简单。

function FileSystemNavigator() {
  const initialData = {...}
  const [tree, setTree] = React.useState(initialData)

  const handleChange = (event, nodeId) => {
    const handleResult = (data) => {
      const items = data.children.map(item => {
        return { id: item.id, label: item.name }
      })
      setTree({
        root: [...tree.root, ...items]
      })
    }
    const handleError = (error) => {
      // handle errors appropriately
      console.error(error.message)
    }
    fetch("https://api.myjson.com/bins/1aqhsc")
      .then(res => res.json())
      .then(handleResult)
      .catch(handleError)
  }

  // ...

  return (...)
}

这应该可以解决问题。

请注意，我使用了您在评论中提供的示例 API 端点，因此您必须更改 handleChange 处理程序中的 handleResult 回调以确保您正确解析新数据。

如果您想看一个简单的示例，我创建了一个带有按钮的 CodeSandbox，单击该按钮可以获取更多数据并将其显示在列表中:

• > Demo

如果您有任何问题，请告诉我。