概述

我正在尝试构建一系列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

当react组件期望一个元素作为返回值时，您将返回JSX Elements数组。只需将您的返回包装成碎片即可解决此问题。像这样

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来访问每个条目的键。原因是当您返回数组时，每个条目必须具有唯一的键。

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

概述

问题

2 个答案: