当 useEffect 中的 state 不为 null 时出现 Null useState 问题答案

【问题标题】：Null useState issue when state is not null in useEffect当 useEffect 中的 state 不为 null 时出现 Null useState 问题
【发布时间】：2021-11-19 01:22:39
【问题描述】：

TypeScript React 中的状态存在一些问题。

子组件通过名为returnTerminal() 的传递函数将“终端”对象传递给父组件。然后将此终端对象存储为 useState _object。 useEffect() 表示 _object 最终不为空，但 callback() 一直保持 _object 为空，我不知道为什么。

父组件

const Parent: React.FunctionComponent<ParentProps> = () => {
  const [_object, set_object] = useState<Terminal>(null);

  const handleGetTerminal = (terminal: Terminal) => {
    set_object(terminal);
  };

  useEffect(() => {
    if (_object !== null) {
      _object.writeln("_object is not null"); // This prints just fine
    }
  }, [_object]);

  return (
    <Child
      returnTerminal={(term) => handleGetTerminal(term)}
      callback={() => {
        console.log(_object === null); // This returns true - the object is null for some reason???
      }}
    />
  );
};

子组件

const Child: React.FunctionComponent<ChildProps> = (props) => {
  const { callback, returnTerminal } = props;

  // The ref where the terminal will be stored and returned
  const ref = useRef<HTMLDivElement>(null);
  // The xterm.js terminal object
  const terminal = new Terminal();

  useLayoutEffect(() => {
    // Calls whenever terminal is typed into
    if (callback) terminal.onData(callback);

    // Mount terminal to the DOM
    if (ref.current) terminal.open(ref.current);

    // Pass the terminal to the parent object
    returnTerminal(terminal);
  }, []);

  return <div ref={ref}></div>;
};

export default Child;

callback() 总是返回 _object 为空，无论我等待多长时间。

【问题讨论】：

评论：console.log(_object === null); // This returns false - the object is null for some reason??? 似乎不正确。它是false，因为它确实有一个值，它不等于null？
useLayoutEffect 钩子回调只运行一次并关闭范围内的callback 和terminal。 const terminal = new Terminal(); 还会在每个渲染周期创建一个新终端，这是故意的吗？
你能不能尝试用typeof _object === "object" && _object !== null"替换_object === null，因为null实际上在JS中被认为是Object类型
这种模式并不常见。你有一个父母持有一个孩子的价值，这很奇怪。让父级持有终端对象并将其传递给子级而不是父级从子级分配一个变量会更好
@Yooooomi 它可能是使用该值的不同组件的共同父级，这没有什么奇怪的。

标签： javascript reactjs typescript react-hooks react-functional-component

【解决方案1】：

答案最终是使用 useImperativeHandle 和 forwardRef。这是完整的代码。

家长

import Child from "./child";

interface ParentProps {
  name?: string;
}

const Parent: React.FunctionComponent<ParentProps> = () => {
  type ChildHandle = ElementRef<typeof Child>;
  const childRef = useRef<Child>(null);

  let _object: Terminal;  // same Terminal type that Child uses

  useEffect(() => {
    if (childRef.current) {
      _object = childRef.current.get(); // imperitive handle function
      _object.writeln(“_object loaded”);
    }
  }, []);

  return (
    <Child
      ref={childRef}
      callback={() => {
        terminal.writeln("_object is not null”);  // THIS finally works
      }}
    />
  );
};

儿童

interface ChildProps {
  callback?(data: string): void;
}

type ChildHandle = {
  get: () => Terminal;
};

const Child: ForwardRefRenderFunction<ChildHandle, ChildProps> = (
  props,
  forRef
) => {
  const { callback } = props;

  const terminal = new Terminal();

  // The ref where the terminal will be stored and returned
  const ref = useRef<HTMLDivElement>(null);

  useImperativeHandle(forRef, () => ({
    get() {
      return terminal;
    },
  }));

  useLayoutEffect(() => {
    // Calls whenever terminal is typed into
    if (callback) terminal.onData(callback);

    // Mount terminal to the DOM
    if (ref.current) terminal.open(ref.current);
  }, []);

  return <div ref={ref}></div>;
};

export default forwardRef(Child);

【讨论】：