子组件不会重新渲染

Question

我正在使用两个功能性反应组件，其中我通过道具将单击项目的id（状态）传递给子组件。

问题

id 确实会在子组件中渲染，但是当父组件中的状态更新时，子组件会创建一个新的渲染，而不是更新之前的渲染。所以例如。子组件显示id 1，当单击另一个项目时，子组件同时显示1和新的id

父类：

import ReactDOM from "react-dom";
import React from "react";
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";
import Test from "./test";
const { useState, useCallback } = React;

export default function MyTreeItem(props) {
  const [childNodes, setChildNodes] = useState(null);
  const [expanded, setExpanded] = React.useState([]);
  const [activeItemId, setActiveItemId] = useState();

  function fetchChildNodes(id) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({
          children: [
            {
              id: "2",
              name: "Calendar"
            },
            {
              id: "3",
              name: "Settings"
            },
            {
              id: "4",
              name: "Music"
            }
          ]
        });
      }, 1000);
    });
  }

  const handleChange = (event, nodes) => {
    const expandingNodes = nodes.filter(x => !expanded.includes(x));
    setExpanded(nodes);
    if (expandingNodes[0]) {
      const childId = expandingNodes[0];
      fetchChildNodes(childId).then(result =>
        setChildNodes(
          result.children.map(node => <MyTreeItem key={node.id} {...node} />)
        )
      );
    }
  };

  const renderLabel = item => (
    <span
      onClick={event => {
        console.log(item.id);
        setActiveItemId(item.id);
        // if you want after click do expand/collapse comment this two line
        event.stopPropagation();
        event.preventDefault();
      }}
    >
      {item.name}
    </span>
  );

  return (
    <div>
      <TreeView
        defaultCollapseIcon={<ExpandMoreIcon />}
        defaultExpandIcon={<ChevronRightIcon />}
        expanded={expanded}
        onNodeToggle={handleChange}
      >
        {/*The node below should act as the root node for now */}
        <TreeItem nodeId={props.id} label={renderLabel(props)}>
          {childNodes || [<div key="stub" />]}
        </TreeItem>
      </TreeView>
      <Test test={activeItemId} />
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<MyTreeItem id="1" name="Applications" />, rootElement);

儿童班：

import React, { useState, useEffect } from "react";

export default function Test({ test }) {
  return <h1>{test}</h1>;
}

重现问题： https://codesandbox.io/s/material-demo-5kfbl

Answer 1

问题来自 [unexpected] recurrency - setChildNodes 将“树根”组件 <MyTreeItem /> 呈现为子项，每个子项都有自己的状态、处理程序等。

您可以通过将 <TreeItem /> 渲染为子级来解决此问题：

    setChildNodes(
      result.children.map(node => <TreeItem nodeId={node.id} label={renderLabel(node)} /> )
    )

工作示例：https://codesandbox.io/s/material-demo-k8mq1