嘗試響應 MAP 數據時出現錯誤。 對象作為 React 子對象無效（找到：object 和鍵 {children}），我該如何解決？

Question

我正在嘗試通過 JSON 數據數組來 map 並且我在這個問題的標題中不斷收到這個錯誤。 Accordion 組件構成了 faqs.js，我使用的是 styled-components。 faq.json 在 faq.js 文件中包含我想要的數據 map 下面是我的代碼

JSON 數據

[
  {
    "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."
  }
]

常見問題解答 JS ()我在哪里嘗試通過 JS 使用 MAP

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>


    )
}

手風琴組件

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

要修復錯誤，您需要更改所有Accordion.xxx元素以解構傳遞給它們的道具。 所以這

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

需要變成這樣：

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

和這個：

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

應該變成：

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

等等...