0

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

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

我认为这与同步情况无关，因为 console.log( '..', name ) 在执行 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 解决了这种情况，并将其放入依赖数组中。

但是，为什么会这样？我不知道 React 如何管理变量的值。

谢谢！

4

1 回答 1

1

useMagic您在挂钩内声明了一个局部变量。

这意味着每次你的钩子被调用时，你都会得到一个新name变量，即undefined. 您的 async通过闭包initMagic保持对特定的引用。name这就是它打印正确值的原因。

如果您想在重新渲染之间保留值（多次调用您的组件/挂钩），您需要使用useStateor useRef。

这就是他们在幕后实际所做的：他们在重新渲染（调用）之间返回存储值。

因此，这将解决您的问题：

const [name, setName] = useState();

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

现在您可以将name任何useEffect.

于 2022-02-15T14:38:24.447 回答