React中通过Context传状态报错TS2339：setImage不存在于类型{}

我正在排查为何创建的Context无法识别state及setState函数，以下是我的代码：

Context文件（PlantContext.tsx） #

import React, {ReactNode, useEffect, useState} from 'react'

const PlantContext = React.createContext({});

interface Props {
    children?: ReactNode
}

const PlantContextProvider = ({children, ...props}: Props) => {

    const [image, setImage] = useState<string>('')

    useEffect(() => {

    }, [])

    return <PlantContext.Provider value={{
    image, setImage
    }}>
    {children}
    </PlantContext.Provider>
}

export {PlantContext, PlantContextProvider}

子组件（AddPlantBtn.tsx） #

import React, {useContext, useEffect, useState} from 'react';
import {PlantContext} from "../../../contexts/PlantContext";

function AddPlantBtn() {
    const plant = useContext(PlantContext)
    const input = document.getElementById('uploadImage') as HTMLInputElement;
    const file = input?.files![0]
    const [imageTaken, setImageTaken] = useState(false)
    useEffect(() => {
        plant.setImage(file) //此处抛出错误，setImage标红
    }, [imageTaken]);
    
    return (
        <>
            <label htmlFor='uploadImage'>
                <span className="btn btn-sm text-base-100 btn-primary m-2"><i className='material-symbols-rounded mr-2 text-base'>add_circle</i>Add plant</span>
                <input onChangeCapture={() => {setImageTaken(true)}} id='uploadImage' type="file" accept="image/*" capture="environment" hidden/>
            </label>
        </>
    );
}

export default AddPlantBtn;

问题原因及修复方案 #

1. Context缺少类型定义（核心问题） #

创建Context时使用React.createContext({})，TypeScript无法推断出Context的value包含image和setImage属性，导致子组件调用plant.setImage时类型报错。

修复：
定义Context的类型接口，并用该类型初始化Context：

import React, {ReactNode, useState} from 'react'

// 定义Context的value类型
interface PlantContextType {
  image: string;
  setImage: React.Dispatch<React.SetStateAction<string>>;
}

// 用类型初始化Context，初始值用空函数占位
const PlantContext = React.createContext<PlantContextType>({
  image: '',
  setImage: () => {}
});

interface Props {
    children?: ReactNode
}

const PlantContextProvider = ({children}: Props) => {
    const [image, setImage] = useState<string>('')

    return (
      <PlantContext.Provider value={{ image, setImage }}>
        {children}
      </PlantContext.Provider>
    )
}

export {PlantContext, PlantContextProvider}

2. DOM元素获取时机错误 #

组件渲染阶段直接调用document.getElementById('uploadImage')，此时组件尚未挂载到DOM，input元素可能不存在，导致input?.files![0]抛出空值错误。

修复：
使用useRef获取DOM元素，确保组件挂载后再访问：

import React, {useContext, useEffect, useState, useRef} from 'react';
import {PlantContext} from "../../../contexts/PlantContext";

function AddPlantBtn() {
    const plant = useContext(PlantContext)
    const inputRef = useRef<HTMLInputElement>(null); // 创建ref
    const [imageTaken, setImageTaken] = useState(false)

    useEffect(() => {
        if (inputRef.current?.files?.[0]) {
            // 将文件转为base64后存入Context
            const file = inputRef.current.files[0];
            const reader = new FileReader();
            reader.onload = () => {
                plant.setImage(reader.result as string);
            };
            reader.readAsDataURL(file);
        }
    }, [imageTaken, plant]);
    
    return (
        <>
            <label htmlFor='uploadImage'>
                <span className="btn btn-sm text-base-100 btn-primary m-2"><i className='material-symbols-rounded mr-2 text-base'>add_circle</i>Add plant</span>
                <input 
                    ref={inputRef} // 绑定ref
                    onChangeCapture={() => setImageTaken(true)} 
                    id='uploadImage' 
                    type="file" 
                    accept="image/*" 
                    capture="environment" 
                    hidden
                />
            </label>
        </>
    );
}

export default AddPlantBtn;

3. useEffect依赖缺失 #

原代码中useEffect仅依赖imageTaken，但内部用到了plant和文件对象，未加入依赖数组会导致闭包问题，无法获取最新的Context值。

修复：
将plant加入依赖数组（修复类型后TypeScript会自动提示），同时通过ref获取最新的文件对象，避免闭包导致的旧值问题。

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