用react-context包装App组件后出现空白屏幕

Question

我正在编写上下文 API，一切工作正常，但是当我使用上下文包装应用程序组件时，屏幕变成空白

上下文代码

import { useState } from "react";
import { createContext, useContext } from "react";

const chatContext = createContext();

const ChatContext = ({ childern }) => {
  const [user, setuser] = useState();
  return (
    <chatContext.Provider value={{ user, setuser }}>
      {childern}
    </chatContext.Provider>
  );
};

export const ChatState = () => {
  return useContext(chatContext);
};

export default ChatContext;

包装contex之前的index.js代码

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

**包装 context api 之后的代码**

import ChatContext from "./Context/ChatContext";

ReactDOM.render(
  <ChatContext>
    <Router>
      <App />
    </Router>
  </ChatContext>,
  document.getElementById("root")
);

但屏幕变成空白任何人都可以帮助我。

我试图解决这个问题但无法做到。请任何人如何帮助我将被应用

Answer 1

我认为你只是拼错了孩子，你写了孩子，如果你改正你的写法，问题就会解决

const ChatContext = ({ *childern* children }) => {
  const [user, setuser] = useState();
  return (
    <chatContext.Provider value={{ user, setuser }}>
      {*childern* children}
    </chatContext.Provider>
  );
};

export const ChatState = () => {
  return useContext(chatContext);
};

export default ChatContext;