javascript - TypeError：props.map 不是函数

Question

BottomMissionText.tsx

import React from "react";
import { Center, Text } from "@chakra-ui/react";
import IMissionText from "../../interfaces/AboutPage/IMissionText";

//Simple bottom mission text component
export default function BottomMissionText(props: Array<IMissionText>) {
    return (
        <Center pt={5}>
            {props.map((i) => (
                <Text>{i.title}</Text>
            ))}
        </Center>
    );
}

任务文本.ts

export default interface IMissionText {
    title: string;
    text: string;
}

MissionBox.tsx（片段）

<Box>
    {isT !== false ? (
       <BottomMissionText {...traditionalStatement} />
    ) : null}
    {isL !== false ? (
    <BottomMissionText {...traditionalStatement} />
    ) : null}
</Box>

我已经尝试了将近两个小时，并且一直收到此错误（标题）。

Answer 1

为了传递多个对象，在您的 MissionBox.tsx 中，您应该将 traditionalStatement 定义为对象数组

const traditionalStatement: IMissionText[] = [
    {
        title: "your title1 string",
        text: "your text1 string",
    },
    {
        title: "your title2 string",
        text: "your text2 string",
    }
]

// ... rest of your component's code

<Box>
    {isT !== false ? (
       <BottomMissionText traditionalStatement=traditionalStatement />
    ) : null}
    {isL !== false ? (
    <BottomMissionText traditionalStatement=traditionalStatement />
    ) : null}
</Box>

在功能组件中，需要定义 props 的 schema。我已经给它命名了IBottomMissionTextProps。然后traditionalStatement像下面的代码那样对功能组件中的 from 道具进行解构。或者直接props.traditionalStatement在地图中使用。

import React from "react";
import { Center, Text } from "@chakra-ui/react";
import IMissionText from "../../interfaces/AboutPage/IMissionText";

interface IBottomMissionTextProps {
    traditionalStatement: IMissionText[];
}

//Simple bottom mission text component
export default function BottomMissionText(props: IBottomMissionTextProps) {
    const { traditionalStatement } = props; // destructuring
    // alternatively, you can use 
    // const traditionalStatement = props.traditionalStatement;

    return (
        <Center pt={5}>
            {traditionalStatement.map((i) => (
                <Text>{i.title}</Text>
            ))}
        </Center>
    );
}