如何在React组件return语句中获取googleToken的更新值？

• 函数组件的普通局部变量不会被React响应式追踪：你用let googleToken = null声明的是普通JS变量，修改它不会触发组件的重新渲染，所以视图永远不会更新展示最新值。
• 就算你后续修改了这个变量的值，只要组件触发重渲染（比如props变化、其他状态更新），整个Layout函数会重新执行，googleToken会被重新赋值为初始的null，更新后的值直接丢失。
• 你代码里的getGoogleToken方法中已经调用了setGoogleToken，但你并没有声明对应的响应式状态，这本身也会抛出未定义错误。

1. 从React导入useState钩子，用响应式状态存储googleToken，修改后参考代码如下：

import { useState, useEffect } from 'react';

const Layout = props => {
  // 替换原来的普通变量声明，用useState创建响应式状态
  const [googleToken, setGoogleToken] = useState(null);

  useEffect( () => {
    fetchGoogleToken();
  }, [])

  const fetchGoogleToken = async () => {
    await api
      .get("/google_token")
      .then((response) => {
        console.log('google_token: ' + response.data.google_token);
        // 调用set方法更新状态，会自动触发组件重渲染，视图同步更新
        setGoogleToken(response.data.google_token);
        console.log('google_token updated: ' + response.data.google_token);
      })
    .catch((error) => console.log(error));
  };

  const getGoogleToken = (res) => {
    console.log(res);
    setGoogleToken(res.accessToken);
    // 状态更新后立即调用接口建议传最新值，避免闭包问题
    saveGoogleTokenInDB(res.accessToken);
  };

  const saveGoogleTokenInDB = async (token) => {
    await api
      .post("/fit-auth", {google_token : token})
      .then((response) => {
        console.log(response);
      })
    .catch((error) => console.log(error));
  };

  return (       
    <div className={classes.googleButton} style={{display: googleToken === null ? 'block' : 'none'}}>
      <h3>{googleToken}</h3>
    </div>
  )
}

2. 额外注意：如果saveGoogleTokenInDB是在更新状态后立即调用，建议直接把最新的token值当参数传入，避免闭包捕获到旧状态的问题。同时原代码里的div闭合标签写错成了<div/>，要改成</div>避免渲染错误。

内容的提问来源于stack exchange，提问作者Pedro Fontes