React useContext正确用法？创建可修改用户名上下文遇类型错误

问题描述 #

我试图创建一个可存储用户名并允许子组件修改该用户名的Context。不清楚React是否最近更新，网上教程中的useContext()都不带参数，但现在它需要参数，且设置value=[userName, setUserName]时出现错误：“Type '(Dispatch | undefined)[]' is not assignable to type 'string'”。我尝试了以下两种写法均无效：

第一种代码 #

import React, { useState, createContext } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import logo from './logo.svg';
import './App.css';
import Home from './components/homepage/Home';
import Register from './components/register/Register';
import Post from './components/post/Post'; 
import Feed from './components/feed/Feed';

export const Context = createContext('');

function App() {

  const [userName, setUserName] = useState();

  return (
    <BrowserRouter>
    <Routes>
        <Route path="/" element={<Context.Provider value = {[userName, setUserName]}><Home /></Context.Provider>} />
        <Route path="/register" element={<Register />} />
        <Route path="/post" element={<Post />} />
        <Route path="/feed" element={<Feed />} />
    </Routes>
  </BrowserRouter>
  );
}

export default App;

第二种代码 #

// Create a new context and export
export const NameContext = createContext();
 
// Create a Context Provider
const NameContextProvider = ({ children }) => {
    const [name, setName] = useState(undefined);
 
    return (
        <NameContext.Provider value={{ name, setName }}>
            {children}
        </NameContext.Provider>
    );
};

问题分析与解决 #

1. 类型不匹配的核心问题 #

第一种写法里，你用createContext('')初始化了一个字符串类型的Context，但Provider的value传的是数组[userName, setUserName]，类型检查自然会报错——字符串和数组类型不兼容。

2. useContext 从来都需要参数 #

网上旧教程的写法大概率是笔误或省略了关键代码，useContext从诞生起就必须接收Context对象作为参数，不存在不带参数的用法。

正确实现方式 #

步骤1：匹配结构初始化Context

给Context设置和Provider value一致的默认值结构，避免类型冲突，同时防止子组件调用空值报错：

// 用对象结构更清晰，默认值包含初始用户名和空函数
export const UserContext = createContext({
  userName: undefined,
  setUserName: () => {}
});

步骤2：全局包裹Provider

不要只在单个路由里包裹Provider，否则其他路由组件（比如Register、Post）根本访问不到Context。应该把Provider套在所有路由外层：

function App() {
  const [userName, setUserName] = useState();

  return (
    <BrowserRouter>
      <UserContext.Provider value={{ userName, setUserName }}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/register" element={<Register />} />
          <Route path="/post" element={<Post />} />
          <Route path="/feed" element={<Feed />} />
        </Routes>
      </UserContext.Provider>
    </BrowserRouter>
  );
}

步骤3：子组件中使用Context

比如在Register组件里修改用户名：

import { useContext } from 'react';
import { UserContext } from '../App';

function Register() {
  const { setUserName } = useContext(UserContext);

  const handleSetName = (e) => {
    e.preventDefault();
    setUserName(e.target.username.value);
  };

  return (
    <form onSubmit={handleSetName}>
      <input type="text" name="username" placeholder="输入用户名" />
      <button type="submit">确认设置</button>
    </form>
  );
}

export default Register;

第二种写法的补全 #

第二种写法的Provider组件逻辑是对的，但需要导出Provider并在App中使用：

// 导出Provider组件
export const NameContextProvider = ({ children }) => {
    const [name, setName] = useState(undefined);
 
    return (
        <NameContext.Provider value={{ name, setName }}>
            {children}
        </NameContext.Provider>
    );
};

// 在App中全局包裹
function App() {
  return (
    <BrowserRouter>
      <NameContextProvider>
        <Routes>
          {/* 路由配置 */}
        </Routes>
      </NameContextProvider>
    </BrowserRouter>
  );
}

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