尝试在反应中映射数据时出现错误。对象作为 React 子对象无效（找到：带有键 children 的对象），我该如何解决？

Posted 2023-03-17

【中文标题】尝试在反应中映射数据时出现错误。对象作为 React 子对象无效（找到：带有键 children 的对象），我该如何解决？

【英文标题】：I AM HAVING ERROR WHEN TRYING TO MAP A DATA IN REACT . Objects are not valid as a React child (found: object with keys children), How do i solve it?尝试在反应中映射数据时出现错误。对象作为 React 子对象无效（找到：带有键 children 的对象），我该如何解决？

【发布时间】：2021-06-02 18:10:30

【问题描述】：

我正在尝试通过一组 JSON 数据进行映射，并且在此问题的标题中不断收到此错误。 Accordion 组件构成了 faqs.js，我使用的是 styled-components。 faq.json 包含我要在 faq.js 文件中映射的数据下面是我的代码

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."
  
]

FAQS JS ()我在哪里尝试映射 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>


    )

手风琴组件

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 ;
;

【问题讨论】：

尝试从地图返回函数。

@ChandradeeptaLaha 他已经是了。

我认为他没有从地图函数@codemonkey内部返回

@ChandradeeptaLaha 缺少花括号，默认返回 return 语句。

好的。不知道那个。谢谢@codemonkey

【参考方案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) 

等等……