React父组件用let声明的非state变量传给子组件时为null如何解决

React函数组件每次触发重新渲染时，都会完整执行一遍函数体，你用let声明的普通变量会在每次渲染时被重置为初始值null。你点击按钮触发setData的流程是：先给data赋值为Test，之后调用setShowChild触发父组件重新渲染，此时父组件函数重新执行，let data = null会把之前的赋值覆盖为初始值，所以渲染子组件时传递过去的值就是null。

如果你不想把这个变量绑定为可触发渲染的state，可以用useRef存储可变值，useRef的current属性在组件多次渲染之间会保持稳定，不会因为重新渲染被重置。

import { useState, useRef } from 'react';
import ReactDOM from 'react-dom';

function Parent() {
    const [showChild, setShowChild] = useState(false);
    // 用useRef存储渲染间需要保留的可变值
    const dataRef = useRef(null);

    const setData = () => {
      dataRef.current = 'Test';
      setShowChild(true);
      console.log('function called');
    };

    return (
      <>
        <button onClick={setData}>
          Click Me
        </button>
        {showChild && <Child data={dataRef.current} />}
      </>
    );
}

function Child({data}) {
    console.log('data '  + data);
    return (
      <>
        <h2>
          {data}
        </h2>
      </>
    );
}

ReactDOM.render(
  <Parent />, 
  document.getElementById('mountNode'),
);

补充说明：如果后续这个变量的值变化后需要同步更新已渲染子组件的内容，还是需要将其声明为state，因为useRef的current属性变化不会触发组件重新渲染，只有state变化才会触发重渲染更新视图。

内容的提问来源于stack exchange，提问作者rns