当父状态改变时，React 不会渲染子元素

Question

请查看此代码https://codesandbox.io/s/dazzling-waterfall-9b2hd 。

为什么在父状态更改时不呈现子组件。

如果我在 Parent 中使用<Child parentProxy={proxy} />而不是 children 它工作正常。（没有键）

我究竟做错了什么。 我知道我可以将片段的键设置为值，它会触发“儿童”的渲染。

我试图理解为什么当我使用没有片段键的“儿童”时它没有呈现。

谢谢

问题代码：

import * as React from "react";
import "./styles.css";

class parentProxy {
  constructor() {
    this.setValue = () => void 0;
    this.getValue = () => 1;
  }
  public setValue: (value: number) => void;
  public getValue: () => number;
}

interface childProps {
  parentProxy: parentProxy;
}

interface parentProps {
  proxy: parentProxy;
}

export const Child: React.FunctionComponent<childProps> = ({ parentProxy }) => {
  const onClick = (): void => {
    parentProxy.setValue(parentProxy.getValue() + 1);
  };

  return <span onClick={onClick}>{"Click Me" + parentProxy.getValue()}</span>;
};

export const Parent: React.FunctionComponent<parentProps> = ({
  proxy,
  children
}) => {
  const [value, setValue] = React.useState(1);

  const getValue = (): number => value;

  proxy.getValue = getValue;
  proxy.setValue = setValue;

  return <React.Fragment>{children}</React.Fragment>;
};

export const App = () => {
  const proxy = new parentProxy();
  return (
    <Parent proxy={proxy}>
      <Child parentProxy={proxy} />
    </Parent>
  );
};

Answer 1

您正在直接改变道具，这是一种反模式。 相反，使用useState创建proxy和setProxy 。 然后，在父组件的useEffect上使用setProxy ：

import * as React from "react";
import { Dispatch, SetStateAction } from 'react';
import "./styles.css";

class parentProxy {
  constructor() {
    this.setValue = () => void 0;
    this.getValue = () => 1;
  }
  public setValue: (value: number) => void;
  public getValue: () => number;
}

interface childProps {
  parentProxy: parentProxy;
}

interface parentProps {
  setProxy: Dispatch<SetStateAction<parentProxy>>;
}

export const Child: React.FunctionComponent<childProps> = ({ parentProxy }) => {
  const onClick = (): void => {
    parentProxy.setValue(parentProxy.getValue() + 1);
  };

  return <span onClick={onClick}>{"Click Me" + parentProxy.getValue()}</span>;
};

export const Parent: React.FunctionComponent<parentProps> = ({
  setProxy,
  children
}) => {
  const [value, setValue] = React.useState(1);

  const getValue = React.useCallback((): number => value, [value]);

  React.useEffect(() => {
    setProxy((proxy: parentProxy) => ({ ...proxy, getValue, setValue }))
  }, [getValue, setValue, setProxy])
  return <React.Fragment>{children}</React.Fragment>;
};

export const App = () => {
  const [proxy, setProxy] = React.useState(new parentProxy());
  return (
    <Parent setProxy={setProxy} >
      <Child parentProxy={proxy} />
    </Parent>
  );
};