Question

我正在尝试构建一个treeview组件，以做出反应，根据用户扩展的节点来获取树的数据。

问题

我想用服务器中的数据替换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

如果我的理解正确，您想用setTimeout的真实调用替换API调用的“伪造” fetch实现。

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

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端点，因此您必须在handleResult处理程序中更改handleChange回调，以确保您适当地解析新数据。

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

Demo

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

附加提取的数据

1 个答案: