Question

为什么我会收到“useContext 不是一个函数”或“上下文未定义”？

2019-07-03

16285

reactjs

我正在尝试在无状态组件中使用上下文。我将 React 更新到 v16.8.0 并添加了 useContext，但是，我不断收到这两个错误，不知道还能做什么。这是我的代码：

import React, { useState } from "react";
import axios from "axios";
import { LanguageContext } from "./languageContext";
import { useContext } from "react";

function StripeButton() {
  const context = useContext(LanguageContext);
  const stripe = Stripe("pk_live_5PjwBk9dSdW7htTKHQ3HKrTd");

  const [error, setError] = useState();

  const handleClick = () => {
    stripe
      .redirectToCheckout({
...
    });
  };

  return (
    <div>
      <button
        id="UrgentCheckedButtonYES"
        className="btn-primary"
        onClick={handleClick}
      >
        {this.context.main.name}
        <br />
      </button>
      <div>{error}</div>
    </div>
  );
}

export default StripeButton;
StripeButton.contextType = LanguageContext;

Answer 1

您需要像这样导入 useContext ：

import { useContext } from 'react';

brandonwang

2019-07-03

Answer 2

const { useContext } = React

useContext 作为 React 的方法属性导出

lry

2019-07-03

Answer 3

（在 React 18 中测试过。）

在 App.js 文件中：

import { createContext } from "react";
import ChildComponent from "./components/ChildComponent";

export const Context = createContext("Default Value");

export default function App() {
    const value = "My Context Value"; 

    return (
        <Context.Provider value={value}> 
            <ChildComponent />
        </Context.Provider>
    );
}

在 ChildComponent.jsx 文件中：

import { useContext } from "react";
import { Context } from "../App";

function ChildComponent() {
    const value = useContext(Context);
    return <h1>{value}</h1>;
}

export default ChildComponent;

对于单个上下文，您可以拥有任意数量的消费者。如果上下文值发生变化，则所有消费者都会立即收到通知并重新渲染。

如果消费者未包装在提供者内部，但仍尝试访问上下文值（使用 useContext(Context) 或 <Context.Consumer>），则上下文的值将是提供给创建上下文的 createContext(defaultValue) 工厂函数的默认值参数。