渲染不是函数 updateContextConsumer

Posted 2023-03-16

【中文标题】渲染不是函数 updateContextConsumer

【英文标题】：Render is not a function updateContextConsumer

【发布时间】：2021-07-13 21:34:24

【问题描述】：

我有 3 个组件（CompA、CompB、CompC）我想将数据从 CompA 发送到 CompC，但它显示错误 Render is not a function updateContextConsumer。我正在使用功能组件

import React, createContext  from 'react';
import './App.css';
import CompA from './ContextApi/CompA';

const FirstName = createContext();

function App() 
  return (
    <>
      <FirstName.Provider value="JD">
        <CompA/>
      </FirstName.Provider>
    </>
  );


export default App;
export FirstName; 


import React from 'react';
import CompB from './CompB';

const CompA = () =>
    return(
        <CompB/>
    )


export default CompA;

import React from 'react';
import CompC from './CompC';

const CompB = () =>
    return(
        <CompC/>
    )


export default CompB;

import React from 'react';
import FirstName from '../App';

const CompC = () =>
    return(
        <>
            <FirstName.Consumer> fname=>(<h1>fname</h1>)  </FirstName.Consumer>
        </>
    )


export default CompC;

错误图片在这里

enter image description here

【参考方案1】：

我认为问题在于<FirstName.Consumer> 结尾与 以及 和</FirstName.Consumer> 之间的空格。以下内容不适用于留下的空格：

const FirstName = React.createContext();

const CompA = () =>
    return (
        <CompB/>
    )
;

const CompB = () =>
    return (
        <CompC/>
    )
;

const CompC = () => 
    return(
        <React.Fragment>
            <FirstName.Consumer> (fname) => (<h1>fname</h1>) </FirstName.Consumer>
        </React.Fragment>
    )
;

function App() 
  return (
    <React.Fragment>
      <FirstName.Provider value="JD">
        <CompA/>
      </FirstName.Provider>
    </React.Fragment>
  );
;

ReactDOM.render(<App />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

您也可以将 (fname) => (<h1>fname</h1>) 部分放在单独的行上，如下所示：https://reactjs.org/docs/context.html#contextconsumer