useContext 返回 udefined

Question

我是 React 的新手，我正在尝试使用 Context API。这是我的代码：

FormColorContext.js

import React, { useState } from 'react';

export const FormColorContext = React.createContext();

const FormColorProvider = (props) => {
    const [color, setColor] = useState('white')
    
    return (
        <FormColorContext.Provider value={{color}}>
            {props.children}
        </FormColorContext.Provider>
    )
}


export default FormColorProvider

dashboard.js

import React from 'react';
import FormColorProvider from '../context/FormColorContext';
import DefaultLayout from '../layout/default-layout';
import EmptyDashboardComponent from '../components/Dashboard/EmptyDashboardComponent';
import NewFormComponent from '../components/Dashboard/NewFormComponent';
import ColorSelectorComponent from '../components/Dashboard/ColorSelectorComponent';
import styles from '../styles/dashboard.module.css';


export default function Dashboard() {
  return (
    <div>
      <DefaultLayout>
        <div className={styles.containerMain}>
          <h1 className={styles.headingCenter}>Create a new form</h1>
          <FormColorProvider>
            <ColorSelectorComponent/>
            <NewFormComponent/>
          </FormColorProvider>
        </div>
      </DefaultLayout>
    </div>
  )
}

NewFormComponent.js

import React, { useContext } from 'react';
import styles from '../../styles/NewFormComponent.module.css';
import FormColorContext from '../../context/FormColorContext';

export default function NewFormComponent() {
    const color = useContext(FormColorContext);

    console.log(color);
    return (
        <div className={styles.formContainer}>
        </div>
    )
}

我确保所有导入都是正确的，但是由于某种原因，当我尝试记录颜色变量时，我得到了未定义的信息。我究竟做错了什么？提前致谢。 雷纳托

Answer 1

示例：Expo Snack

在您的 Context Provider 中，您正在传递一个对象，因此访问颜色如下：

NewFormComponent.js：

import React, { useContext } from 'react';
import styles from '../../styles/NewFormComponent.module.css';
import {FormColorContext} from '../../context/FormColorContext';

export default function NewFormComponent() {
    const {color} = useContext(FormColorContext);
    console.log(color);
    return (
        <div className={styles.formContainer}>
        </div>
    )
}

FormColorContext.js：

import React, { useState } from 'react';

export const FormColorContext = React.createContext();

export const  FormColorProvider = (props) => {
    const [color, setColor] = useState('white')
    
    return (
        <FormColorContext.Provider value={{color}}>
            {props.children}
        </FormColorContext.Provider>
    )
}

** 仪表板.js：**

import React from 'react';
import {FormColorProvider} from '../context/FormColorContext';
import DefaultLayout from '../layout/default-layout';
import EmptyDashboardComponent from '../components/Dashboard/EmptyDashboardComponent';
import NewFormComponent from '../components/Dashboard/NewFormComponent';
import ColorSelectorComponent from '../components/Dashboard/ColorSelectorComponent';
import styles from '../styles/dashboard.module.css';


export default function Dashboard() {
  return (
    <div>
      <DefaultLayout>
        <div className={styles.containerMain}>
          <h1 className={styles.headingCenter}>Create a new form</h1>
          <FormColorProvider>
            <ColorSelectorComponent/>
            <NewFormComponent/>
          </FormColorProvider>
        </div>
      </DefaultLayout>
    </div>
  )
}

Answer 2

问题在于进口。您在 NewFormComponent.js 文件中导入默认值。将导入更改为 import {FormColorContext} from '../../context/FormColorContext';

此外，它是 useContext() returns undefined 的重复 你可以用谷歌搜索）

Answer 3

您在 FormColorContext 中导入 NewFormComponent 时遇到问题，它将 undefined 传递给 useContext 方法并且它也返回 undefined。

这是你需要做的：

import React, { useContext } from 'react';
import styles from '../../styles/NewFormComponent.module.css';
import FormColorContext from '../context/FormColorContext';

export default function NewFormComponent() {
    // remember to destructure the color variable
    const { color } = useContext(FormColorContext);

    console.log(color);
    return (
        <div className={styles.formContainer}>
        </div>
    )
}