通过对象数据映射到 React 组件

Question

我发现了有关此错误的各种问题，但无法找到正确的解决方案。概述我正在尝试构建一系列radioInput组件以成为 RadioGroup 的一部分。我通过一个组件来构建它radioGroup，该组件会将各种属性传递给它接收到的输入。当我映射对象的值时，出现以下错误：Error: Objects are not valid as a React child (found: object with keys {radioInputs}). If you meant to render a collection of children, use an array instead.问题我应该如何正确映射对象数据并使用值传递到组件而不将它们作为对象返回？import React from 'react';import RadioInput from './radioInput';export const RadioGroup= props => {    const courseTypes = {        type1: {            label: "Course A"        },        type2: {            label: "Course B"        }    }    const radioInputs = Object.values(courseTypes).map(data => {        return(            <RadioInput            disabled={false}            type={"radio"}            label={data.label}        />         )    })    return(       {radioInputs}    )}export default RadioGroup

Answer 1

当反应组件期望一个元素作为返回值时，您返回一组 JSX 元素。简单地将您返回的片段包装起来应该可以解决此问题。像这样

return(
   <>{radioInputs}</>
   )

仅作为评论中指出的记录，您可以返回一个 JSX.Element 数组。所以下面的（没有花括号）也可以工作。

return(radioInputs)

Answer 2

我认为你想这样做：

import React from 'react';

import RadioInput from './radioInput';

export const RadioGroup= props => {

    const courseTypes = {

        type1: {

            label: "Course A"

        },

        type2: {

            label: "Course B"

        }

    }

    return Object.entries(courseTypes).map(([key, data]) => (

        <RadioInput

            key={key}

            disabled={false}

            type={"radio"}

            label={data.label}

        /> 

    ))

}

export default RadioGroup

变动说明：

• 您的代码无意中返回了一个普通的 JS 对象。这个版本返回一个 JSX 元素数组。

• 它使用Object.entries, 而不是Object.values为了访问每个条目的键。原因是当您返回一个数组时，每个条目都必须有一个唯一的键。