每次在 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. 而不是这个，我想保存selectedValueinit 并稍后在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} />
  );
}