React 函数式组件获取不到变量值？

Question

import React, { useEffect, useState } from 'react';
const Test = () => {
  let test = null;
  useEffect(() => {
    test = 123;
  }, [])
  const testClick = () => {
    console.log(test) // undefined
  }
  return(<button onClick={testClick}>点击</button>)
}

请问大佬们这是为啥？我难以理解...页面加载完毕的时候赋值给test，按理说test已经有值了，为啥打印不出来呢？

Answer 1

因为你的test变量定义在组件内部， 在每一次Test组件渲染时，test变量都会被重新赋值成null 而useEffect却不会在执行 所以是null 建议是使用useRef
e.g.

import React, { useEffect, useState } from 'react';
const Test = () => {
  const test = useRef(null);
  useEffect(() => {
    test.current = 123;
  }, [])
  const testClick = () => {
    console.log(test.current) // undefined
  }
  return(<button onClick={testClick}>点击</button>)
}