React useEffect - useEffect中未定义的变量

Question

我有这种情况，我不知道为什么会这样..

我有一个自定义钩子，它包含一个在执行另一个函数之前无法初始化的变量。

我认为这与同步情况无关，因为console.log( '..'，名称)在执行useEffect()之前显示变量的值，我还放置了一个按钮来手动触发useEffect挂钩(使用另一个状态变量并在onClick函数中更改他的值)，并且该值也未定义。

export const useMagic = () => {
 ...
 let name: string;
 ...

 const initMagic = async () => {
      ...     
      name= 'Copperfield';
      console.log('the value of the variable is:', name);
      ...
 }

 useEffect(()=> {
      const loadRabbit = async () => {
          console.log('The name is', name); //undefined *** HERE IS THE PROBLEM ***
      }

      loadRabbit();
      
}, [someDeps]); // I can't put name inside the dependencies because is used before being assigned. I can't initialize the variable because I need another value to create it. 

}

我在变量上使用useRef解决了这种情况，并将其放在依赖数组中。

但是，为什么会这样呢？有些事情我不知道如何反应管理变量的值。

谢谢!

Answer 1

在useMagic钩子中声明一个局部变量。

这意味着每次调用钩子时，都会得到一个新的name变量，即undefined。异步initMagic保存对特定name通过闭包的引用。这就是为什么它打印正确的价值。

如果希望在重呈现(对组件/钩子的多次调用)之间保留值，则需要使用useState或useRef。

这就是他们实际上在幕后所做的事情:他们在重新呈现(调用)之间返回存储值。

因此，这将是解决您的问题的一个方法：

const [name, setName] = useState();

const initMagic = async () => {
      ...     
      setName('Copperfield');
      console.log('the value of the variable is:', name);
      ...
 }

现在，您可以使用name作为任何useEffect的适当标记。