失败的道具类型：提供给`GlobalState`的`array`类型的无效道具`children`

Question

I am having error like this in my page:

> Warning: Failed prop type: Invalid prop `children` of type `array`
> supplied to `GlobalState`, expected `object`.
>     in GlobalState (created by MyApp)
>     in MyApp
>     in ErrorBoundary (created by ReactDevOverlay)
>     in ReactDevOverlay (created by Container)
>     in Container (created by AppContainer)
>     in AppContainer
>     in Root

Here is following code when I render MyApp :

  render() {
    const { Component, pageProps } = this.props;

    return (
      <>
        {/* <CssBaseline /> */}
        <Meta />
        <ToastContainer />
        <ThemeProvider theme={theme}>
          <GlobalState {...pageProps}>
            <ProgressBar />
            <MessageContextProvider>
              {!isEmpty(pageProps?.serverUserData) && (
                <FloatingChat currentUser={{ ...pageProps?.serverUserData }} />
              )}
              <Component {...pageProps} />
            </MessageContextProvider>
          </GlobalState>
        </ThemeProvider>
      </>
    );
  }
}

export default MyApp;

and here is my GlobalState:

import React, { useState } from "react";
import PropType from "prop-types";
import { GlobalContext } from "./GlobalContext";
const GlobalState = (props) => {
  const [currentUser, setUser] = useState(props.serverUserData);
  const updateUserAvatar = (picture) => {
    setUser({ ...currentUser, picture: picture });
  };

  const updateUser = (userData) => {
    setUser(userData);
  };
  const [isModalOpen, setModalOpenState] = useState(false);
  const [modalToDisplay, setModalToDisplay] = useState("signup");

  const toggleModal = () => {
    setModalOpenState((prevState) => !prevState);
  };

  const setModal = (name) => {
    setModalToDisplay(name);
  };

  const [loading, setLoadingState] = useState(false);
  const [reloadThisData, setWhatToReload] = useState("");
  const [userProfileId, setUserProfileId] = useState("");
  const [adjustBrightness, setAdjustBrightness] = useState(false);

  const providerValues = {
    isModalOpen,
    toggleModal,
    modalToDisplay,
    setModal,
    currentUser,
    updateUser,
    loading,
    setLoadingState,
    reloadThisData,
    setWhatToReload,
    userProfileId,
    setUserProfileId,
    adjustBrightness,
    setAdjustBrightness,
    updateUserAvatar,
  };

  return (
    <GlobalContext.Provider value={providerValues}>
      {props.children}
    </GlobalContext.Provider>
  );
};

export default GlobalState;

GlobalState.propTypes = {
  children: PropType.object,
  user: PropType.object,
  serverUserData: PropType.object,
};

How can I get rid of this warning? Any idea where is this warning come from?

Answer 1

Any idea where is this warning come from?

GlobalState.propTypes = {
  children: PropType.object, // <-- here
  user: PropType.object,
  serverUserData: PropType.object,
};

How can I get rid of this warning?

In the simplest way, update the children propType to match what you are rendering, an array of children components.

GlobalState.propTypes = {
  children: PropType.array,
  user: PropType.object,
  serverUserData: PropType.object,
};

But generally you want to be more specific:

GlobalState.propTypes = {
  children: PropType.arrayOf(PropTypes.node), // <-- array of anything renderable
  user: PropType.object,
  serverUserData: PropType.object,
};

But this is redundant since the node type covers arrays as well:

 // Anything that can be rendered: numbers, strings, elements or an array // (or fragment) containing these types. optionalNode: PropTypes.node,

GlobalState.propTypes = {
  children: PropType.node,
  user: PropType.object,
  serverUserData: PropType.object,
};

If you don't have any restrictions on children types it may be better to just remove children from the propTypes definition altogether.