javascript - 对象作为 React 子对象无效（找到：带有键 {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 子项无效（找到：带有键 {children} 的对象）。如果您打算呈现子项集合，请改用数组。”

标签： javascriptreactjs

Answer 1

问题出在这一行：

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

而不是props，您需要放置props.children，因为这是提供程序中的内容。