错误：对象作为 React 子对象无效找到：带有键 {map、forEach、count、toArray、only} 的对象如果您打算渲染一个集合

如何解决错误：对象作为 React 子对象无效找到：带有键 {map、forEach、count、toArray、only} 的对象如果您打算渲染一个集合

我正在尝试克隆我正在关注的 amazone 网站（youtube 上的 ceLever 程序员） 所以我想用 React context api 创建 amazon 篮子，这个错误发生“错误：对象作为 React 子对象无效（发现：对象带有键 {map,forEach,count,toArray,only}） . 如果您打算渲染一组子项，请改用数组。"

这是我的代码

index.js ：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { StateProvider } from "./StateProvider";
import reducer,{ initialState } from "./reducer";

ReactDOM.render(
  <React.StrictMode>
    <StateProvider initialState={initialState} reducer={reducer}>
      <App />
    </StateProvider>
  </React.StrictMode>,document.getElementById("root")
);

// If you want to start measuring performance in your app,pass a function
// to log results (for example: reportWebVitals(console.log))
serviceWorker.unregister();

stateProvider.js：

import React,{ createContext,useContext,useReducer } from "react";
import { Children } from "react";

export const StateContext = createContext();

export const StateProvider = ({ reducer,initialState,children }) => (
  <StateContext.Provider value={useReducer(reducer,initialState)}>
    {Children}
  </StateContext.Provider>
);

export const useStateValue = () => useContext(StateContext);

reducer.js：

export const initialState = {
  basket: [],};

function reducer(state,action) {
  switch (action.type) {
    case "ADD_TO__BASKET":
      break;
    case "REMOVE_FROM_BASKET":
      break;
    default:
      return state;
  }
}

export default reducer;

header.js：

import React from "react";
import "./Header.css";
import { Link } from "react-router-dom";
import SearchIcon from "@material-ui/icons/Search";
import { grey } from "@material-ui/core/colors";
import ShoppingBasketIcon from "@material-ui/icons/ShoppingBasket";
import { useStateValue } from "./StateProvider";

function Header() {
  const [{ basket }] = useStateValue();

  return (
    <nav className="header">
      {/* logo */}
      <Link to="/">
        <img
          className="header__logo"
          src="https://www.mabaya.com/wp-content/uploads/2019/10/amazon_PNG25.png"
          alt=""
        />
      </Link>

      {/* SearchBox */}
      <div className="header__search">
        <input type="text" className="header__SearchBox" />
        <SearchIcon className="header__SearchIcon" />
      </div>
      {/* Links */}
      <div className="header__nav">
        {/* 1link */}
        <Link to="/login" className="header__link">
          <div className="header__option">
            <span className="header__optionsecondary">Hello,</span>
            <span>Sign in</span>
          </div>
        </Link>
        {/* 2link */}
        <Link to="/check" className="header__link">
          <div className="header__option">
            <span className="header__optionsecondary">returns </span>
            <span>& orders</span>
          </div>
        </Link>
        {/* 3link */}
        <Link to="/" className="header__link">
          <div className="header__option">
            <span className="header__optionsecondary">Your</span>
            <span>Prime</span>
          </div>
        </Link>
        {/* basket link */}
        <Link to="/check" className="header__link">
          <div className="header__optionbasket">
            {/* shopping Basket Icon  */}
            <ShoppingBasketIcon style={{ color: grey[50] }} />
            {/* Number of items in the basket  */}
            <span className="header__optionbaskettext"> {basket.length}</span>
          </div>
        </Link>
      </div>
      {/* panier */}
    </nav>
  );
}

export default Header;

App.js：

import "./App.css";
import { browserRouter as Router,Switch,Route } from "react-router-dom";
import Header from "./Header";
import Home from "./Home";
import Login from "./Login";

function App() {
  return (
    <Router>
      <div className="app">
        <Switch>
          <Route path="/login">
            <Header />
            <Login />
          </Route>

          <Route path="/check">
            <Header />

            <h1>check guys</h1>
          </Route>

          <Route path="/">
            <Header />
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

预先感谢您的回答。