使用React useContext Hook更新上下文值时调用setToken报匿名函数错误如何解决？

嘿，这个问题我之前也踩过坑！你碰到的(anonymous function)错误，核心原因是你创建TokenContext时给的默认值里，setToken只是个空的占位函数，但你并没有在Context的Provider中提供真正能修改状态的setToken方法。也就是说，NotFound组件里拿到的setToken还是那个啥也不做的空函数，自然没法正常更新值啦。

下面是具体的修复步骤：

1. 创建Context的Provider组件管理状态 #

你需要单独写一个Provider组件，在内部用useState来管理token的状态，再把真正的token和setToken通过Provider传递给子组件：

// contexts/TokenProvider.js
import React, { useState } from 'react';
import TokenContext from './TokenContext';

const TokenProvider = ({ children }) => {
  // 这里才是真正的状态管理逻辑
  const [token, setToken] = useState(null);

  return (
    <TokenContext.Provider value={{ token, setToken }}>
      {children}
    </TokenContext.Provider>
  );
};

export default TokenProvider;

2. 在应用根节点用Provider包裹目标组件 #

在你的App.js或者入口文件index.js里，把所有需要访问TokenContext的组件都放在TokenProvider内部：

// App.js
import TokenProvider from './contexts/TokenProvider';
import NotFound from './components/NotFound';

function App() {
  return (
    <TokenProvider>
      {/* 这里可以放你的路由、其他组件 */}
      <NotFound />
    </TokenProvider>
  );
}

export default App;

3. 修复NotFound组件的useEffect无限循环问题 #

你当前的useEffect没有依赖数组，会导致组件每次渲染都调用setToken，进而触发重新渲染，形成无限循环。给它加上空依赖数组，确保只在组件挂载时执行一次：

// NotFound.js
import React, { useContext, useEffect } from 'react';
import TokenContext from '../../contexts/TokenContext';

const NotFound = () => {
  const { token, setToken } = useContext(TokenContext);
  
  useEffect(() => {
    setToken('3');
  }, []); // 空数组限定仅执行一次

  return (
    <h1 className="heading-text font-weight-bold text-center">
      404 Not Found
    </h1>
  );
};

export default NotFound;

这样修改后，setToken就会变成真正能修改状态的函数，不会再出现匿名函数的错误啦～

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