类型错误：props.map 不是 function

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 。 然后像下面的代码一样从功能组件中的 props 中解构traditionalStatement 。 或者直接使用props.traditionalStatement中的 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>
    );
}