ReactJS中如何向useContext获取值传props？解决非函数报错

问题根源 #

你遇到的错误核心有两点：

1. 解构方式与Context传递值不匹配：你在Provider中直接传入函数answerSetter作为value，但消费时用了对象解构const { answerSetter } = ...，这会导致解构出的answerSetter为undefined。
2. 未确保Provider传入的answerSetter是有效函数：如果传递给Provider的answerSetter本身不是函数（比如未定义、或为其他类型值），调用时必然报错。

修复步骤 #

步骤1：修正Context消费方式 #

如果Context仅用来传递单个函数，消费时直接获取函数即可，无需对象解构：

// 直接获取函数，不要解构对象
const answerSetter = useContext(AnswerSetterContext);

const handleOptionClick = event => {
    const selectedValue = event.target.value;
    // 增加类型校验避免意外报错
    if (typeof answerSetter === 'function') {
        answerSetter(selectedValue);
    }
};

步骤2：确保Provider传入有效函数 #

要保证传递给Provider的answerSetter是真实存在的函数，比如来自useState的setter：

// 在Provider所在组件中定义好函数
const [answer, answerSetter] = useState('');

// 传递给Provider
<AnswerSetterContext.Provider value={answerSetter}>
    <SearchBar key="SearchBar" placeholder="Type something" data={data} />
</AnswerSetterContext.Provider>

可选：用对象包裹Context值（便于后续扩展） #

如果之后需要在Context中传递更多内容，建议将value封装为对象，此时解构方式就合理了：

// 创建Context时设置安全默认值，避免未被Provider包裹时报错
export const AnswerSetterContext = createContext({ answerSetter: () => {} });

// Provider中传递对象
<AnswerSetterContext.Provider value={{ answerSetter }}>
    <SearchBar key="SearchBar" placeholder="Type something" data={data} />
</AnswerSetterContext.Provider>

// 消费时正常解构
const { answerSetter } = useContext(AnswerSetterContext);

额外注意事项 #

• 确保SearchBar组件被完整包裹在AnswerSetterContext.Provider内部，否则useContext会拿到Context的默认值（你当前默认是null，调用会直接报错）。
• 给Context设置安全默认函数，能避免组件未被Provider包裹时的意外报错。

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