类型错误：props.map 不是函数

问题描述

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>
    );
}

IMissionText.ts

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

MissionBox.tsx（片段）

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

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

解决方法

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

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>

在function组件中，需要定义props的schema。我已将其命名为 IBottomMissionTextProps。然后从功能组件中的道具中解构 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>
    );
}