React Context 不工作：未定义 no-undef

Posted 2023-04-14

【中文标题】React Context 不工作：未定义 no-undef

【英文标题】：React Context not working: is not defined no-undef

【发布时间】：2020-12-12 16:45:06

【问题描述】：

为什么我的 Context 在 React 中不起作用？在下面收到一个未定义的错误。

import React,  useContext   from 'react';

function BookList() 
  const PrintContext = React.createContext("CAR");

  const list = [
     title: 'ABCDE', author: 'John Smith' 
  ]

  return (
    <PrintContext.Provider value="APPLE">
    <ul>
      list.map((book, i) => <Book title=book.title author=book.author key=i />)
    </ul>
    </PrintContext.Provider>
  )


function Book(props) 
  const theme = useContext(PrintContext)
  return (
    <li>
      <h2>theme</h2>
      <h2>props.title</h2>
      <div>props.author</div>
      <input value=props.year />
    </li>
  )

接收错误：

'PrintContext' 未定义 no-undef

使用最新版本的 React

资源：

React context - 'contextType' is not defined

【问题讨论】：

嗨@PrãtéékThápá 它有效，请随时回答，我可以发送积分，谢谢！

普通的 javascript 购物仍然适用。

【参考方案1】：

将您的 PrintContext 置于Booklist 函数的范围之外。

import React,  useContext   from 'react';

const PrintContext = React.createContext("CAR");

function BookList() 

  const list = [
     title: 'ABCDE', author: 'John Smith' 
  ]

  return (
    <PrintContext.Provider value="APPLE">
    <ul>
      list.map((book, i) => <Book title=book.title author=book.author key=i />)
    </ul>
    </PrintContext.Provider>
  )


function Book(props) 
  const theme = useContext(PrintContext)
  return (
    <li>
      <h2>theme</h2>
      <h2>props.title</h2>
      <div>props.author</div>
      <input value=props.year />
    </li>
  )