追加获取的数据

问题描述 投票:1回答:1

我正在尝试构建一个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>
  );
}

javascript reactjs
1个回答
0
投票

如果我的理解正确,您想使用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,它带有一个按钮,可以单击该按钮以获取更多数据并将其显示在列表中:

让我知道是否有任何疑问。

© www.soinside.com 2019 - 2024. All rights reserved.