對象作為 React 子級無效（找到：object 和鍵 {children}）。 如果您打算渲染一組孩子，請改用數組

Question

我在反應中使用上下文並且在使用它的道具時遇到問題。 任何人都可以得到它的解決方案。 這是我的代碼和錯誤。！ 這是我的 useAuth.js 代碼

const AuthContext = createContext();
export const AuthContextProvider = (props) => {
  const auth = Auth();
  return <AuthContext.Provider value={auth}>{props}</AuthContext.Provider>;
};


export const useAuth = () => useContext(AuthContext);
const Auth = () => {
  const [user, setUser] = useState(null);
  const provider = new firebase.auth.GoogleAuthProvider();

  const signInWithGoogle = () => {
    return firebase
      .auth()
      .signInWithPopup(provider)
      .then((res) => {
        const signedInUser = getUser(res.user);
        setUser(signedInUser);
        localStorage.setItem("hot-onion-user", true);
        return res.user;
      })
      .catch((err) => {
        console.log(err);
        setUser(null);
        return err.message;
      });
  };

這就是我使用上下文的地方

<AuthContextProvider>
      <div className="App">
        <Router>
          <Header></Header>
          <Switch>
            <Route path="/login">
              <Login />
            </Route>
            <Route path="/signup">
              <Signup />
            </Route>
            <Route path="*">
              <NoMatch></NoMatch>
            </Route>
          </Switch>
        </Router>
      </div>
    </AuthContextProvider>

錯誤消息是“錯誤：對象作為 React 子項無效（找到：object 和鍵 {children}）。如果您要呈現子項集合，請改用數組。”

Answer 1

問題出在這一行：

return <AuthContext.Provider value={auth}>{props}</AuthContext.Provider>;

您需要放置props.children而不是props ，因為這是提供程序中的內容。