React+TypeScript Todo应用中数组map调用自定义组件不生效问题

问题根源 #

第2种写法无法渲染和类型定义、Props调用逻辑无关，是箭头函数返回值规则导致的：
JS箭头函数如果用花括号{}包裹函数体，必须显式写return才会返回内容；如果用圆括号()包裹或者不写包裹符号，才会隐式返回表达式结果。
你第2种写法写了花括号但没有加return，map遍历后返回的是全为undefined的数组，自然没有任何内容渲染。第1种是直接渲染单个组件所以正常，第3种用了圆括号隐式返回所以可以正常渲染。

修复方案 #

二选一即可：

1. 给花括号包裹的函数体加return语句

{todos.map(todo=> {
  return <TodoListItem todo={todo} />
})}

2. 去掉花括号，改用圆括号包裹返回内容（和你第3种写法逻辑一致）

{todos.map(todo => (
  <TodoListItem todo={todo} />
))}

额外注意事项 #

• 列表渲染必须给每一项加唯一key属性，否则React会抛出运行时警告，没有业务唯一id的场景可以临时用遍历下标代替：

{todos.map((todo, index) => (
  <TodoListItem key={index} todo={todo} />
))}

• 你的类型定义文件需要给interface加export导出，否则其他文件无法引入使用：

// src/model/todo.type.tsx 调整后
export interface Todo {
    text: string;
    email2: string;
}

export interface Props2 {
    todo: Todo;
}

• 你代码里的setTods拼写错误，应该是setTodos，后续修改todo列表状态时会触发报错。

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