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的init并稍后在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} />
  );
}

每当在ReactJs中重新渲染组件时，实例变量都会重置

1 个答案: