时间戳

首页 > 解决方案 > 附加获取的数据

javascript - 附加获取的数据

问题描述

我正在尝试构建一个树视图组件，以根据用户扩展的节点获取树的数据。

问题

我想handleChange用我的服务器中的数据替换里面的代码，以便我将获取的数据附加到tree状态中。我怎样才能通过反应实现这一目标？

我得到的数据可能如下所示：

{
  "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>
  );
}

标签： javascriptreactjs

解决方案

如果我理解正确，您想将setTimeoutAPI 调用的“假”实现替换为使用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带有按钮的按钮，单击该按钮可以获取更多数据并将其显示在列表中：

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

推荐阅读