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

【问题标题】：Failed prop type: Invalid prop `children` of type `array` supplied to `GlobalState`失败的道具类型：提供给`GlobalState`的`array`类型的无效道具`children`
【发布时间】：2021-05-05 16:34:56
【问题描述】：

我的页面出现这样的错误：

> 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

下面是我渲染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;

这是我的 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,
};

我怎样才能摆脱这个警告？知道这个警告来自哪里吗？

【问题讨论】：

标签： reactjs

【解决方案1】：

知道这个警告来自哪里吗？

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

我怎样才能摆脱这个警告？

以最简单的方式，更新children propType 以匹配您正在呈现的内容，即一组子组件。

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

但通常您希望更具体：

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

但这是多余的，因为 node 类型也包含数组：

// 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,
};

如果您对子类型没有任何限制，最好从 propTypes 定义中完全删除 children。

【讨论】：