React中如何实现点击新增带自增序号的待办列表数组项

原有代码问题 #

• 无需单独维护count状态存储序号：Array.prototype.map遍历数组时第二个参数就是当前项的索引，从0开始计数，+1即可得到从1开始的连续序号。你当前嵌套遍历count数组的写法，会导致每个待办项下方渲染出所有历史序号，和预期效果完全不符，额外维护count状态还容易出现两个状态不同步的bug。
• 状态更新写法存在隐患：直接使用setTodo([...todo, input])的写法，在短时间多次触发添加操作时，会因为闭包捕获到旧的todo状态，导致新增项丢失。
• 事件绑定冗余：同时给form和button绑定提交相关事件，容易出现重复触发的问题，统一绑定form的submit事件即可覆盖点击按钮、按回车提交两种场景。
• 列表渲染未加唯一key：React遍历渲染列表时要求每个列表项有唯一key，否则会出现渲染性能问题、状态错位问题。

修正后代码 #

import { useState } from 'react';

function Product() {
  const [input, setInput] = useState("");
  const [todoList, setTodoList] = useState([]);

  const addTodo = e => {
    e.preventDefault();
    const newTodo = input.trim();
    if (!newTodo) return;
    // 函数式更新保证始终拿到最新的状态值
    setTodoList(prev => [...prev, newTodo]);
    setInput("");
  };

  return (
    <div>
      <form onSubmit={addTodo}>
        <input 
          value={input} 
          onChange={e => setInput(e.target.value)} 
          type='text' 
        />
        <button type='submit'>Add!</button>
      </form>

      <h2 style={{ marginBottom: "0.5rem" }}>List of To-dos !</h2>
      {/* map第二个参数index为数组下标，从0开始 */}
      {todoList.map((item, index) => (
        <p key={`todo-${index}`}>
          {index + 1}. {item}
        </p>
      ))}
    </div>
  );
}

效果说明 #

• 新增待办项时，会自动按添加顺序在项左侧显示从1开始的递增序号，不需要额外维护计数状态。
• 空输入不会被添加到列表中，避免生成空的待办项。
• 无论是点击Add按钮还是输入完成后按回车，都可以正常提交新待办。

内容的提问来源于stack exchange，提问作者João Silva