React+TypeScript向组件传递自定义类型数组Props的实现问题

核心错误点 #

• 组件Props接收语法错误：React函数组件的入参是完整的props对象，不能直接将入参声明为目标数组类型，否则无法正确读取传入的属性
• 未执行传参操作：父组件Home中未渲染Elements组件，也没有将存储人员信息的person数组传递给子组件
• JSX渲染语法错误：h1标签的文本内容需要写在标签的开闭合标签之间，不能直接以属性形式写在标签起始位；同时列表遍历未添加React要求的key标识，会触发运行时警告

修复代码 #

1. 修正Elements子组件 #

import React from "react";
import { personType } from "../../pages/Home";

// 声明组件接收的Props类型
type ElementsProps = {
  persons: personType[]
}

export const Elements = ({ persons }: ElementsProps) => {
  return ( 
    <>
      {/* 修正h1内容渲染语法，补充遍历key */}
      {persons.map((person, index) => <h1 key={index}>{person.name}</h1>)}
    </>   
  );
};

2. 修正父组件Home的传参逻辑 #

在Home组件的return模板中，需要展示人员列表的位置引入Elements组件，传入person数组：

return(
  <>
    <GlobalStyles/>
    <ContainerStyles>
      <Input onChange={(e) => getName(e)} placeholder={"Nome:"}/>
      <Input onChange={(e) => getAge(e)} placeholder={"Idade:"}/>
      <Input onChange={(e) => getProfession(e)} placeholder={"Profissão:"}/>
      <Button onClick={() => AddPerson()}>Adicionar usuário</Button>
    </ContainerStyles>
    <ContainerStyles>
      <Input onChange={(e) => getPersonName(e)}/>
      <Button onClick={() =>  GetPersonsInfo()}>Mostrar Usuários</Button>
    </ContainerStyles>
    {/* 新增：渲染Elements组件并传入person数组 */}
    <ContainerStyles>
      <Elements persons={person} />
    </ContainerStyles>
  </>
)

其他潜在问题修复建议 #

• 所有表单相关的useState建议给空字符串作为初始值，避免提交请求时出现undefined值触发后端报错，例如const [InputName, setName] = useState<string>('')
• AddPerson接口提交的字段名（idade、profissao）请和后端接口要求对齐，如果后端接收的字段是age、profession，需要对应修改提交参数，否则会触发500错误
• 更新person列表时建议使用函数式更新避免闭包导致的旧状态问题：setPerson(prev => [...prev, {name: name, age: idade, profession: profissao}])
• 异步请求后的状态打印不要写在then回调外部，由于异步执行特性，外部打印拿到的永远是更新前的旧值，需要打印最新值请放到then回调内，或通过useEffect监听person状态变化后打印

内容的提问来源于stack exchange，提问作者Eduard Wild