Я могу что-то потерять по пути ... Я хочу передать аргументы объекта дочерним элементам для динамического рендеринга тремя разными способами.

Вот моя цель:

const cards = [
        {
            imgSrc: "first",
            desc: "some text"
        },
        {
            imgSrc: "second",
            desc: "some text"
        },
        {
            imgSrc: "third",
            desc: "some text"
        }
    ];

Это дочерний компонент:

import { Box } from '@mui/system'
import React from 'react'

import "../../style/main.scss"

import first from "../../images/veloce.png"
import second from "../../images/sicuro.png"
import third from "../../images/vicino.png"
import { Typography } from '@mui/material'

function Card( source, text ) {
    return (
        <Box className="foundation-card">
            <img src={source}/>
            <Typography variant="h6">{text}</Typography>
            <Typography variant="body2">{text}</Typography>
        </Box>
    )
}

export default Card

И затем у меня есть родительский компонент, в котором я хочу отобразить несколько карт, отображающих массив карт:

import Card from "./Card"
import CustomDivider from "../foundation/CustomDivider"

function Values() {

    return (
        <Box className="vertical-box main-maxw section-margin">
            <Typography variant="h4">Perchè sceglierci</Typography>
            <CustomDivider />
            <Box className="foundation-box values">
                {cards.map((p) => {
                    return <Card source={p.imgSrc} text={p.desc} />
                })}
            </Box>
        </Box>
    )
}

export default Values

А затем я получаю это:

Ошибка: объекты недопустимы как дочерние объекты React (обнаружен: объект с ключами {}). Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив.

Я полагаю, что это глупая ошибка, но я использую свой первый подход и не знаю, как двигаться. Спасибо вам всем.

0
Luca Natale 11 Окт 2021 в 22:44

2 ответа

Лучший ответ

Я думаю, проблема в том, что ваша функция карты ожидает позиционных аргументов, но вы вызываете ее с помощью объекта.

<Card source={p.imgSrc} text={p.desc} />
// These two things are equivalent.
Card({source: p.imgSrc, text: p.desc})

По сути, вы назначали исходный аргумент и объект, которые содержали как исходный текст, так и текст.

Попробуйте изменить функцию карты, чтобы принять объект

function Card({source, text}) {
...
}
0
nlta 11 Окт 2021 в 19:51

Я вижу странные вещи.

1- где вы сопоставляете карты, вы не импортируете массив карт, или я не вижу, откуда вы получаете массив карт

2-функциональная карта - это компонент реакции, поэтому вы должны заключить реквизиты в {} следующим образом: function Card ({source, text})

0
Nacho 11 Окт 2021 в 19:53