我的Reaction组件中有两个数组,如下所示.

const [Selected, setSelected] = React.useState([]);
const [NonSelected, setNonSelected] = React.useState([]);

const Tmp_Selected = [
  { "Metric": "AAA", "Weight": 10, "Value": "xxx" },
  { "Metric": "BBB", "Weight": 20, "Value": "xx1" },
  { "Metric": "CCC", "Weight": 30, "Value": "xx2" },
];
const Tmp_NonSelected = [
  { "Metric": "DDD", "Weight": 5, "Value": "yy" },
  { "Metric": "EEE", "Weight": 15, "Value": "zz" },
  { "Metric": "FFF", "Weight": 25, "Value": "cc" },
];

React.useEffect(() => {
  setSelected(Tmp_Selected);
  setNonSelected(Tmp_NonSelected);
}, [location]);

有一个函数只传递了MetricWeight个相关值.在此基础上,我需要将符合两个条件的每个对象从NonSelected数组移动到Selectedarray.

const MoveValues = (Metric='DDD', Weight=5) => {
  
}

上述两项违约措施的预期结果等于...

const Tmp_Selected = [
   { "Metric": "AAA", "Weight": 10, "Value": "xxx" },
   { "Metric": "BBB", "Weight": 20, "Value": "xx1" },
   { "Metric": "CCC", "Weight": 30, "Value": "xx2" },
   { "Metric": "DDD", "Weight": 5, "Value": "yy" },
];
const Tmp_NonSelected = [
   { "Metric": "EEE", "Weight": 15, "Value": "zz" },
   { "Metric": "FFF", "Weight": 25, "Value": "cc" },
];

推荐答案

OP实际依赖于解决该任务的特征是一个变异reject功能的array.

这样的函数(或方法)确实接受类似于filter的回调,其中回调的参数是item, idx, arr, ...,其返回值应该是布尔类型,或者至少是真/假.在每次调用回调的结果上,当完全迭代要操作的数组时,reject实现将splice每个匹配来自操作的数组的项,从而使后者变异.每个拼接的项都收集在实现的result数组中,该数组也是reject函数的返回值.

因此,可以像这样简单地实现OP的moveValues功能的可能实现.

const tmpSelected = [
  { "Metric": "AAA", "Weight": 10, "Value": "xxx" },
  { "Metric": "BBB", "Weight": 20, "Value": "xx1" },
  { "Metric": "CCC", "Weight": 30, "Value": "xx2" },
];
const tmpNonSelected = [
  { "Metric": "DDD", "Weight": 5, "Value": "yy" },
  { "Metric": "EEE", "Weight": 15, "Value": "zz" },
  { "Metric": "DDD", "Weight": 5, "Value": "aa" },
  { "Metric": "FFF", "Weight": 25, "Value": "cc" },
  { "Metric": "DDD", "Weight": 5, "Value": "bb" },
];

const moveItems = (metric, weight) => {
  tmpSelected
    .push(
      ...reject(tmpNonSelected, item => {

        return item.Metric === metric && item.Weight === weight;
      }),
    );
};
moveItems('DDD', 5);

console.log({ tmpSelected, tmpNonSelected });
.as-console-wrapper { min-height: 100%!important; top: 0; }
<script>
function reject(target, condition) {
  const result = [];

  let idx = target.length;
  const copy = [...target];

  // - Processing the `target` array from RIGHT to LEFT
  //   keeps the `idx` always in sync with both related
  //   array items, the one of the mutated and also the
  //   one of the unmutated `copy` of the processed array
  //   reference.
  // - Thus, `condition` always gets passed the unmutated
  //   shallow `copy`.

  while (idx) {
    if (
      // - take a *sparse array* into account.
      target.hasOwnProperty(--idx) &&

      // - keep processing the unmutated array.
      condition(copy[idx], idx, copy)
    ) {
      // - keep filling the `result` array with each
      //   *rejected* item FROM its LEFT side while
      //   mutating the `target` array.
      result.unshift(target.splice(idx, 1)[0]);
    }
  }
  // - returns an array of rejected items, but not the
  //   processed and mutated `target` array reference.
  return result;
}
</script>

Javascript相关问答推荐

如何访问Json返回的ASP.NET Core 6中的导航图像属性

从mat—country—select获取整个Country数组

类型自定义lazy Promise. all

如何使覆盖div与可水平滚动的父div相关?

如何在Javascript中使用Go和检索本地托管Apache Arrow Flight服务器?

未捕获错误:[]:getActivePinia()被调用,但没有活动Pinia.🍍""在调用app.use(pinia)之前,您是否try 使用store ?""

使用Java脚本根据按下的按钮更改S文本

虚拟滚动实现使向下滚动可滚动到末尾

rxjs插入延迟数据

如何在使用rhandsontable生成表时扩展数字输入验证?

使用js构造一个html<;ath&>元素并不能使其正确呈现

在使用位板时,如何在Java脚本中判断Connect 4板中中柱的对称性?

当用户点击保存按钮时,如何实现任务的更改?

为什么这个.add.group({})在教程中运行得很好,但在我的游戏中就不行了?

如何在Bootstrap中减少网格系统中单个div的宽度

获取';无法解决导入和导入";slick-carousel/slick/slick-theme.css";';错误

有角粘桌盒阴影

使用静态函数保存 node 前的钩子

打字脚本中的函数包装键入

为什么我的Reaction组件不能使用createBrowserRouter呈现?