React+TS向组件传列表参数时红警、白屏无法调用map报错

两个核心错误直接导致TS飘红、页面白屏报map执行失败，附带一个类型不匹配的隐患：

• 子组件接收props的方式完全错误。React函数组件的入参是包含所有传参的props对象，不是直接接收单个传参值。你当前写的(persons:Array<personType>)实际拿到的是{ persons: person数组 }这个对象，对象本身没有map方法，执行persons.map()必然报错，TS也会因为类型和实际入参不匹配飘红。
• 状态更新存在闭包问题。你在GetPersonsInfo里直接拿外层的person变量做展开，多次触发请求时会因为闭包拿到旧的状态值，导致列表数据重复、丢失。
• 字段和类型定义不匹配。你定义的personType中年龄字段是age（数字类型），但实际和后端交互用的字段是idade，且输入框绑定的年龄状态是字符串类型，和TS定义的数字类型冲突，后续会引发隐式类型错误。

1. 修正子组件的Props接收逻辑 #

不要直接把参数声明为数组类型，正确声明props类型结构，推荐用解构写法直接拿到需要的字段：

// 公共类型建议抽离到独立types文件复用，不要在父子组件重复定义
type personType = {
    name: string,
    age: number,
    profession: string
}

// 声明组件接收的props结构
type ElementsProps = {
  persons: Array<personType>
}

export const Elements = ({ persons }: ElementsProps) => {
     return ( 
        <>
            {/* 列表渲染必须加唯一key，避免React渲染警告 */}
            {persons.map((person) => <h1 key={person.name}>{person.name}</h1>)}
        </>   
    );
};

2. 修正父组件的逻辑问题 #

统一字段类型、修复状态更新写法、补全错误捕获：

// 其余导入逻辑保持不变
export const Home = () => {
    // 复用公共的personType，不要在组件内重复定义
    const [InputName, setName] = useState<string>('');
    const [InputAge, setInputAge] = useState<string>('');
    const [Inputprofession, setInputProfession] = useState<string>('');
    const [personNameToSearch, setPersonNameToSearch] = useState<string>('');
    const [person, setPerson] = useState<Array<personType>>([]);

    // 输入框处理函数保持不变
    const getName = (e:ChangeEvent<HTMLInputElement>) => setName(e.target.value)
    const getAge = (e:ChangeEvent<HTMLInputElement>) => setInputAge(e.target.value)
    const getProfession = (e:ChangeEvent<HTMLInputElement>) => setInputProfession(e.target.value)
    const getPersonName = (e:ChangeEvent<HTMLInputElement>) => setPersonNameToSearch(e.target.value)

    const AddPerson = () => {
        axios.post('http://localhost:3333/person/', {
            name: InputName,
            // 提交时把字符串年龄转成数字，和类型定义匹配；字段名和后端保持一致
            idade: Number(InputAge),
            profissao: Inputprofession
        }).then((response) => {
            console.log(response);
        }).catch((err) => { 
            // 不要只判断500错误，所有请求异常统一捕获
            console.error('新增用户失败：', err.message)
        }); 
    }

    const GetPersonsInfo = async () => {
        try {
            const response = await axios.get(`http://localhost:3333/person/${personNameToSearch}`)
            const { name, idade, profissao } = response.data
            // 用函数式更新状态，避免闭包拿到旧的person值
            setPerson(prev => [...prev, {
                name: name,
                age: idade,
                profession: profissao
            }])
        } catch (err) {
            console.error('查询用户列表失败：', err)
        }
    }

    // 其余return渲染逻辑保持不变
    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)} placeholder={"Nome"}/>
                <Button onClick={() =>  GetPersonsInfo()}>Mostrar Usuários</Button>
                <Elements persons={person}/> 
            </ContainerStyles>
        </>
    )
}

• 同一份TS类型定义不要在父子组件中重复声明，抽离到公共类型文件后在两边导入复用，避免两边类型不一致引发的隐性错误
• 如果后端返回的年龄字段是字符串类型，直接把personType里的age类型改成string即可，不用强制转数字，保持前后端字段类型对齐
• 列表渲染的key属性不要用数组下标，优先用人员的唯一ID、不重复的姓名作为key值，避免列表动态更新时出现渲染错乱
• 跨域请求、接口地址可以统一封装到axios实例里，不要在组件里硬编码接口地址

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