React中使用map函数无法渲染待办列表，报箭头函数缺少返回值错误

错误原因 #

报错Array.prototype.map() expects a return value from arrow function array-callback-return是ESLint校验触发的规则提醒，map方法要求回调函数必须有返回值，你的TodoList.js中todos.map的箭头函数使用了大括号包裹JSX逻辑，但没有显式写return返回内容，导致不符合规则。

修复方案 #

任选以下一种方式修改TodoList.js的map部分代码即可：

方案1：使用箭头函数隐式返回 #

将map回调的大括号{}替换为小括号()，箭头函数会自动返回括号内的JSX元素：

import React from "react";

function TodoList({ todos, setTodos }) {
  return (
    <div>
      {todos.map((todo) => (
        <li key={todo.id}>
          <input
            type="text"
            value={todo.title}
            onChange={(event) => event.preventDefault()}
          />
        </li>
      ))}
    </div>
  );
}

export default TodoList;

方案2：显式添加return关键字 #

如果保留大括号写法，在JSX代码前添加return语句即可：

{todos.map((todo) => {
  return (
    <li key={todo.id}>
      <input
        type="text"
        value={todo.title}
        onChange={(event) => event.preventDefault()}
      />
    </li>
  );
})}

额外优化提示 #

你当前写的todo输入框仅绑定了value属性，onChange里只做了默认事件阻止，后续如果要实现编辑todo功能，需要在onChange中匹配对应todo的id，更新todos数组中对应项的title值。

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