React中Map循环渲染输入框问题：修改单个输入框同步更新所有框

问题根源是所有输入框共用了同一个sortOrder状态变量，修改任意一个输入框都会更新这个全局状态，导致所有输入框的值同步变化。以下是两种可行的解决方法：

方法一：用数组存储每个输入框的排序值（按索引关联） #

1. 初始化状态时，根据文件夹列表生成对应长度的数组，默认值取每个文件夹的sort_order：

const [sortOrders, setSortOrders] = useState(folders.map(folder => folder.sort_order));

2. 循环渲染时，绑定对应索引的状态值，更新时只修改数组中对应位置的元素：

{folders.map((folder, i) => (
  <input
    type="text"
    id={`order_${i}`}
    name={`order_${i}`}
    style={{
      width: "50px",
      borderRadius: "100px",
      border: "none",
      textAlign: "center",
      background: "#d7eefc",
    }}
    value={sortOrders[i]}
    onChange={(e) => {
      // 复制原数组避免直接修改状态
      const updatedOrders = [...sortOrders];
      updatedOrders[i] = e.target.value;
      setSortOrders(updatedOrders);
    }}
  />
))}

方法二：用对象存储排序值（按文件夹唯一标识关联，推荐） #

如果列表存在增删、排序变动的情况，索引可能会错乱，用文件夹的唯一ID（比如folder.id）作为键更可靠：

1. 初始化状态，将每个文件夹的sort_order存入对象：

const [sortOrders, setSortOrders] = useState(
  folders.reduce((acc, folder) => {
    acc[folder.id] = folder.sort_order;
    return acc;
  }, {})
);

2. 渲染时绑定对应ID的状态值，更新时修改对象中对应键的值：

{folders.map((folder, i) => (
  <input
    type="text"
    id={`order_${folder.id}`}
    name={`order_${folder.id}`}
    style={{
      width: "50px",
      borderRadius: "100px",
      border: "none",
      textAlign: "center",
      background: "#d7eefc",
    }}
    value={sortOrders[folder.id]}
    onChange={(e) => {
      // 展开原对象并更新指定键的值
      setSortOrders(prev => ({
        ...prev,
        [folder.id]: e.target.value
      }));
    }}
  />
))}

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