如何在组件父亲与孩子之间传递数据以使用打字稿做出本机反应

Question

我是打字稿的新手，我试图在组件之间传递数据，但我不知道如何在打字稿中做到这一点

我的父亲组件

const  Main: React.FC = () => {
  const [orgsData, setOrgsData] = useState<Array<Orgs>>([])

  useEffect(() => {
    loadOrgs()
  },[])
  const loadOrgs = () =>{
    Services.getOrgs()
      .then(response =>{
        setOrgsData(response.data)
        console.log(response.data)
      })
      .catch(e =>{
        console.log(e)
      })
  }
  return (
    <Box flex = {1} >
        <Navbar/>
        <SubHeader/>
        <OrgsList data = {orgsData}/>
        <Footer/>
    </Box>
  );
}

export default Main;

我的子组件

import Orgs from '../api/interfaces'

interface OrgList {
  data: Orgs[]
}

export default function OrgList(props: OrgList) {
  const data = props;
  return (
    <Center>
      <Box>
        <Flex flexDirection="column">
          {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={500}
                  >
                    {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>

  );
}

当我尝试映射我的道具时返回此错误

“OrgList”类型上不存在属性“map”

我是打字稿的新手，我不知道如何在这些组件之间传递数据

Answer 1

从以下位置更改子行：

常量数据 = 道具；

改为：

常量数据 = props.data：

这是因为当您将它传递给行中的组件时，您将其称为“数据”：

如果您改为使用 banana={orgsData}，那么子组件会将其称为 props.banana。

Answer 2

使用下面的语法会更容易使用。

家长

检查您要传递给孩子的道具的名称。在您给定的代码中，您传递的是 data。

const  Main: React.FC = () => {

  ...

  return (
    <Box flex = {1} >
        <Navbar/>
        <SubHeader/>
        <OrgsList data = {orgsData}/> // <- Passing "data" as prop name.
        <Footer/>
    </Box>
  );
}

export default Main;

孩子

1. 在 Props 中，声明所需的道具名称和类型。我们在这里声明“数据”。
2. 然后在子组件中，直接使用destructuring的prop。

import Orgs from '../api/interfaces'

interface Props {
  data: Orgs[] // <-- Prop name should be "data"
}

export const OrgList: React.FC<Props> = ({data}) => {
  // const data = props; <-- DELETE - data is extracted directly above

  // Tip: You can rename "data" by changing ({data}) to ({data: renamedData})
  //      above. Note that "renamedData" is NOT a Type!
  //      (Refer to "Assigning to new variables names and providing default values"
  //      in the given link for "destructuring".)


  return (
    <Center>
      ...
    </Center>
  );
}