React开发中箭头函数return规则及map遍历逻辑相关疑问

箭头函数return的判定标准 #

带花括号包裹函数体的箭头函数，规则和普通的function声明没有任何区别：

• 只要你需要把函数内部计算得到的结果，作为返回值传递给调用方，就必须手动写return语句，否则调用方拿到的会是undefined
• 如果函数内部只做副作用操作（比如打印日志、调用接口、修改外部变量，不需要向外抛出任何计算结果），就完全可以不写return

你看到其他示例里不写return的代码，基本都是第二种场景：比如作为事件回调的onClick={() => { console.log("按钮被点击了") }}，这个箭头函数只负责打日志，不需要返回任何值，自然不用写return。
反过来你代码里的setState(prevState => { return { todos: updatedTodos } })，React要求传给setState的状态更新函数必须返回新的状态对象，这里必须通过return把对象抛出去，否则React拿不到更新值，页面就不会重新渲染。

另外要注意别和箭头函数的简写语法混淆：很多示例里写的不带花括号的形式，比如item => <TodoItem />，是ES6的语法糖——省略花括号时，函数会默认把后面紧跟的表达式的值作为返回值，不需要手动写return，这和带花括号的写法是完全等价的。

map遍历中return todo的逻辑误区 #

Array.map()的核心运行规则是：无论回调函数内部写了什么逻辑，它都会完整遍历原数组的每一个元素，把每一次回调的返回值，按照原顺序拼接成一个全新的数组返回。

顺着你写的代码走一遍完整流程就能理清逻辑：

1. 初始prevState.todos一共3条待办数据，map会触发3次回调，每次把数组里的一条todo传入回调供你处理
2. 第1次循环：传入的todo.id和handleChange接收到的id不匹配，跳过if判断，执行回调里的return todo，把id为1的待办对象作为这次回调的返回值
3. 第2次循环：传入的todo.id和参数匹配，把这条待办的completed状态取反，然后执行return todo，把修改完成的对象作为这次回调的返回值
4. 第3次循环：传入的todo.id和参数不匹配，跳过if判断，执行return todo，把id为3的待办对象作为这次回调的返回值
5. 三次回调执行完成后，map把三次返回的对象按顺序拼在一起，就得到了长度和原数组完全一致的新数组，也就是你代码里赋值给updatedTodos的内容。

你之前的认知偏差，本质是把单次回调的return，和map整体的返回逻辑搞混了：这个return todo不是只执行一次就终止循环，是每遍历完一条数据，就必须通过return告诉map“这条数据处理完了，结果是这个”，等所有数据都处理完，map才会把所有收集到的结果拼成最终的新数组。

顺带提一个当前代码的潜在隐患：现在的写法是直接修改原todo对象的completed属性，属于直接改动state中存储的原始数据，后续开发容易触发React状态更新识别失效的问题，后续可以调整为返回拷贝的新对象，不直接修改原始数据的属性。

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