尝试响应 MAP 数据时出现错误。 对象作为 React 子对象无效（找到：object 和键 {children}），我该如何解决？

Question

I am trying to map through an array of JSON data and I keep getting this error in the title of this question. The Accordion component is what makes up the faqs.js, i am using styled-components. The faq.json contains the data I want to map in the faq.js file Below is my code

JSON DATA

[
  {
    "id": 1,
    "header": "What is Netflix?",
    "body": "Netflix is a streaming service that offers a wide variety of award-winning TV programmes, films, anime, documentaries and more – on thousands of internet-connected devices.\n\nYou can watch as much as you want, whenever you want, without a single advert – all for one low monthly price. There's always something new to discover, and new TV programmes and films are added every week!"
  },
  {
    "id": 2,
    "header": "How much does Netflix cost?",
    "body": "Watch Netflix on your smartphone, tablet, smart TV, laptop or streaming device, all for one low fixed monthly fee. Plans start from £5.99 a month. No extra costs or contracts."
  },
  {
    "id": 3,
    "header": "Where can I watch?",
    "body": "Watch anywhere, anytime, on an unlimited number of devices. Sign in with your Netflix account to watch instantly on the web at netflix.com from your personal computer or on any internet-connected device that offers the Netflix app, including smart TVs, smartphones, tablets, streaming media players and game consoles.\n\nYou can also download your favourite programmes with the iOS, Android, or Windows 10 app. Use downloads to watch while you're on the go and without an internet connection. Take Netflix with you anywhere."
  },
  {
    "id": 4,
    "header": "How do I cancel?",
    "body": "Netflix is flexible. There are no annoying contracts and no commitments. You can easily cancel your account online in two clicks. There are no cancellation fees – start or stop your account at any time."
  },
  {
    "id": 5,
    "header": "What can I watch on Netflix?",
    "body": "Netflix has an extensive library of feature films, documentaries, TV programmes, anime, award-winning Netflix originals, and more. Watch as much as you want, any time you want."
  }
]

FAQS JS ()WHERE I AM TRYING TO MAP OVER THE JS

import React from 'react'
import { Accordion } from "../components";
import faqsData from '../fixtures/faq.json';

export default function FaqsContainers() {
    return (

        <Accordion>
            <Accordion.Title>Frequently Asked Questions</Accordion.Title>

            {faqsData.map((item) => (
                <Accordion.Item key={item.id}>
                    <Accordion.Header>{item.header}</Accordion.Header>
                    <Accordion.Body>{item.body}</Accordion.Body>
                </Accordion.Item>
                ))}
            <Accordion.Item />
        </Accordion>


    )
}

ACCORDION COMPONENTS

import React, {useState , useContext , createContext} from 'react';
import { Container , Frame , Title, Item, Inner, Header, Body } from './style/accordion';

const ToggleContext = createContext();

export default function Accordion ({ children , ...restProps}){
    return (
        <Container>
            <Inner {...restProps}>
                {children}
            </Inner>
        </Container>
    );
}

Accordion.Title = function AccordionTitle(children, ...restProps) {
    return <Title {...restProps}>{children}</Title>;
};
Accordion.Frame = function AccordionFrame(children, ...restProps) {
    return <Frame {...restProps}>{children}</Frame>;
};
Accordion.Item = function AccordionItem(children, ...restProps) {
    const [toggleShow, setToggleShow] = useState(false)
    return <Item {...restProps}>{children}</Item>;
};
// setToggle function is used to control the toggling of the accodion  

Accordion.Header = function AccordionHeader(children, ...restProps) {
    const {toggleShow , setToggleShow} = useContext(ToggleContext)
    return <Header onClick={()=> setToggleShow((toggleShow)=> !toggleShow)} 
    {...restProps}>{children}
    </Header>;
};

Accordion.Body = function AccordionBody(children, ...restProps) {
    const {toggleShow} = useContext(ToggleContext)
    return toggleShow ? <Body{...restProps}> {children} </Body> : null ;
};

Answer 1

To fix the error, you will need to change all your Accordion.xxx elements to destructure the props passed to them. So this

Accordion.Title = function AccordionTitle(children, ...restProps) {

needs to become this:

Accordion.Title = function AccordionTitle({children, ...restProps}) {

and this:

Accordion.Frame = function AccordionFrame(children, ...restProps) {

should turn into:

Accordion.Frame = function AccordionFrame({children, ...restProps}) {

And so on...