React组件中如何按条件在两个状态数组间迁移元素

基础组件结构与初始化 #

先搭建组件的基础框架，包含状态定义和初始化逻辑：

import { useState, useEffect } from 'react';

const ValueMigrationComponent = () => {
  const [selected, setSelected] = useState([]);
  const [nonSelected, setNonSelected] = useState([]);

  // 假设这是你的初始数据源
  const Tmp_Selected = [{ Metric: 'A', Weight: 5 }, { Metric: 'B', Weight: 8 }];
  const Tmp_NonSelected = [{ Metric: 'C', Weight: 10 }, { Metric: 'A', Weight: 5 }, { Metric: 'C', Weight: 15 }];

  // 初始化状态：用扩展运算符创建新数组，避免直接引用初始数据
  useEffect(() => {
    setSelected([...Tmp_Selected]);
    setNonSelected([...Tmp_NonSelected]);
  }, []);

实现 moveValues 函数 #

根据需求不同，提供两种实现方案：

场景1：迁移所有匹配条件的元素

如果需要把所有同时匹配 Metric 和 Weight 的元素从 nonSelected 移到 selected：

const moveValues = (targetMetric, targetWeight) => {
    // 筛选出需要迁移的元素
    const itemsToMove = nonSelected.filter(item => 
      item.Metric === targetMetric && item.Weight === targetWeight
    );

    // 更新未选中数组：移除匹配的元素
    const updatedNonSelected = nonSelected.filter(item => 
      !(item.Metric === targetMetric && item.Weight === targetWeight)
    );

    // 更新选中数组：合并原有元素和迁移元素
    const updatedSelected = [...selected, ...itemsToMove];

    // 更新状态（必须用新数组引用触发React重渲染）
    setSelected(updatedSelected);
    setNonSelected(updatedNonSelected);
  };

场景2：仅迁移第一个匹配的元素

如果只需要移动第一个符合条件的元素：

const moveValues = (targetMetric, targetWeight) => {
    // 找到第一个匹配元素的索引
    const matchIndex = nonSelected.findIndex(item => 
      item.Metric === targetMetric && item.Weight === targetWeight
    );

    // 没有匹配元素时直接返回
    if (matchIndex === -1) return;

    // 拆分出剩余的未选中元素
    const updatedNonSelected = [
      ...nonSelected.slice(0, matchIndex),
      ...nonSelected.slice(matchIndex + 1)
    ];
    // 合并选中元素和目标元素
    const updatedSelected = [...selected, nonSelected[matchIndex]];

    setSelected(updatedSelected);
    setNonSelected(updatedNonSelected);
  };

组件渲染示例 #

添加触发迁移的UI和状态展示：

return (
    <div className="migration-container">
      <div>
        <h3>已选中元素</h3>
        <ul>
          {selected.map((item, idx) => (
            <li key={`selected-${idx}`}>{`Metric: ${item.Metric}, Weight: ${item.Weight}`}</li>
          ))}
        </ul>
      </div>

      <div>
        <h3>未选中元素</h3>
        <ul>
          {nonSelected.map((item, idx) => (
            <li key={`non-selected-${idx}`}>
              {`Metric: ${item.Metric}, Weight: ${item.Weight}`}
              <button onClick={() => moveValues(item.Metric, item.Weight)}>移至选中</button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default ValueMigrationComponent;

关键注意事项 #

• 状态不可变性：React状态是只读的，必须通过创建新数组（而非直接修改原数组）来更新状态，否则React无法检测到变化触发重渲染。
• 匹配条件准确性：确保元素的 Metric 和 Weight 字段类型与传入参数一致（比如数字类型不要和字符串类型对比）。
• 重复元素处理：如果数组中存在完全相同的元素，场景1的逻辑会全部迁移，若需要去重，可以在合并 selected 数组时添加去重逻辑。

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