React Native+TypeScript父向子传值后调用map报错如何解决？

你遇到的TypeScript报错是子组件取值逻辑错误导致的：

• 你定义的OrgList是props的类型，它本身是一个包含data属性的对象，不是数组
• 子组件中const data = props;的写法，是把整个props对象赋值给了data变量，这个对象本身没有map方法，只有它内部的data字段才是你从父组件传递过来的数组类型

修改子组件的取值逻辑即可，有两种常用写法：

写法1：直接从props提取data属性 #

把const data = props;改成const data = props.data;即可。

写法2：入参解构props（更推荐） #

直接在函数入参时解构出data属性，代码更简洁易读，修改后的完整子组件代码如下：

import Orgs from '../api/interfaces'

interface OrgListProps {
  data: Orgs[]
}

// 入参直接解构出data字段
export default function OrgList({ data }: OrgListProps) {
  return (
    <Center>
      <Box>
        <Flex flexDirection="column">
          {/* 此时data是数组，可正常调用map方法 */}
          {data.map((item) => ( 

          <Box
            padding={3}
            w={350}
            h='auto'
            borderRadius={14}
            backgroundColor="#ffffff"
            shadow={1}
          >
            <Flex flexDirection='row'>
              <Box>
                <Image alt = '' borderRadius={6} w={50} h={50} source={ReactIcon} />
              </Box>
              <Flex flexDirection='column'>
                <Box marginLeft={2}>
                  <Heading
                    fontSize={16}
                    color="#2196f3"
                    fontWeight={50}
                  >
                    {item.login}
                  </Heading>
                  <Heading
                    fontSize={16}
                    color="#636363"
                    fontWeight={400}
                    overflow='hidden'
                  >
                    React website and its localizations
                  </Heading>
                </Box>
              </Flex>
            </Flex>
            <Flex flexDirection='row' justifyContent='flex-end'>
              <Button
                marginTop={3}
                padding={2}
                size='sm'
                borderRadius={16}
                backgroundColor='#91CBF9'
                startIcon={
                  <Icon
                    as={<SalvoAzul />}
                    size='sm'
                  >
                  </Icon>
                }
              >
                <Text
                  textAlign='center'
                  color='#2196f3'
                >
                  Salvar
                </Text>
              </Button>
            </Flex>
          </Box>
          ))}
        </Flex>
      </Box>
    </Center>
  );
}

父组件中调用的子组件名为<OrgsList />，但你当前子组件导出的名称是OrgList，两者名称不一致，修改完数据问题后需要同步组件名，否则会报组件不存在的错误。

内容的提问来源于stack exchange，提问作者Matheus Martins