TypeError: props.map is not a 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>
    );
}

IMissionText.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>

在功能组件中，您需要定义道具的架构。我把它命名为IBottomMissionTextProps。然后像下面的代码一样从功能组件中的 props 解构 traditionalStatement 。或者直接在map中使用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>
    );
}

TypeError: props.map is not a function

TypeError: props.map is not a function

javascript

typescript

reactjs

chakra-ui