React使用useContext时报TypeError: render is not a function错误求助

问题根源 #

你遇到的报错是因为在App.js中错误地直接使用createContext返回的上下文对象作为渲染组件，上下文对象本身不具备渲染能力，你自己封装的StateProvider才是用来包裹全局应用的合法组件。

修正步骤 #

1. 调整App.js的导入项，将导入StateContext改为导入你封装好的StateProvider
2. 替换App.js中最外层的<StateContext>标签为<StateProvider>

修正后的核心代码 #

App.js 修改后内容 #

import React, { Component } from "react";
import BigWrapper from "./justComponents/BigWrapper/BigWrapper";
import NavBar from "./justComponents/NavBar/NavBar";
import MainContainer from "./justComponents/MainContainer/MainContainer";
// 业务组件导入
import SEARCHANDDISPLAY from "./Responsibilities/SEARCHANDDISPLAY/SEARCHANDDISPLAY";
import { GETCLICKEDIMAGES } from "./Responsibilities/GETCLICKEDIMAGES/GETCLICKEDIMAGES";
// 这里修改为导入封装好的StateProvider
import { StateProvider } from "./StateContext/StateContext";

class App extends Component {
  render() {
    return (
      // 这里替换为StateProvider包裹全局组件
      <StateProvider>
        <BigWrapper>
          <NavBar />
          <MainContainer>
            <SEARCHANDDISPLAY />
            <GETCLICKEDIMAGES />
          </MainContainer>
        </BigWrapper>
      </StateProvider>
    );
  }
}

export default App;

可选优化 #

如果后续需要全局共享和修改names状态，可以把StateProvider的value改为传递状态和修改方法，方便子组件调用：

// StateContext.jsx 中的StateProvider修改
export const StateProvider=(props)=> {
  const [names, setNames] = useState([{ name: "Zucci Daniel! its working" }]);
  // 把状态和更新方法都传给上下文
  return (
    <StateContext.Provider value={{names, setNames}}>
      {props.children}
    </StateContext.Provider>
  );
}

子组件使用时直接解构即可：

const {names, setNames} = useContext(StateContext);

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