reactjs - 每次在 ReactJs 中重新渲染组件时都会重置实例变量

Question

我创建了一个功能组件并在其中声明了一些变量。

const Foo = (props) => {
  let instanceVariable = null;

  const selectValue = (value) => {
    instanceVariable = value;
  }

  const proccessVariable = () => {
   // Use instanceVariable and do some task
  }

  return(
    <SelectionOption onChange={selectValue} />
  );
}

我观察到每当 Foo 的父组件重新渲染或某个时候 Foo本身重新渲染 instanceVariable设置回 null .而不是这个，我想保存 selectedValue初始化并稍后处理它 proccessVariable()方法。

如果我设置 instanceVariable如 state它会起作用，并且不需要状态来保存选定的值。

我知道 useEffect(()=>{}, [])只运行一次，但我如何声明 instanceVariable在那里并在其他功能中使用它。

你能告诉我我做错了什么吗？

Answer 1

由于您直接在功能组件中声明了一个变量，因此每次重新渲染组件时都会重置其值。您可以使用 useRef在函数组件中声明实例变量

const Foo = (props) => {
  let instanceVariable = useRef(null);

  const selectValue = (value) => {
    instanceVariable.current = value; // make sure to use instanceVariable.current
  }

  const proccessVariable = () => {
   // Use instanceVariable.current and do some task
  }

  return(
    <SelectionOption onChange={selectValue} />
  );
}