使用React Hooks实现点击按钮将数组对象移入新数组

你只需要修改clickHandler函数，找到点击按钮对应的对象，再通过setMyNewArray更新状态数组即可。下面提供两种实现方式：

方式一：直接传递完整item对象（更简洁） #

修改按钮点击事件，直接把当前item传给clickHandler，省去通过categoryKey查找对象的步骤：

import React, { useState } from "react";

const App = () => {
const [items, setItems] = useState([
{ name: "Furniture", categoryKey: 1 },
{ name: "Shoes", categoryKey: 2 },
{ name: "Electronics", categoryKey: 3 },
{ name: "Clothes", categoryKey: 4 },
{ name: "Grocery", categoryKey: 5 },
]);
const [myNewArray, setMyNewArray] = useState([{ name: "demo-item", categoryKey: 100 }]);

// 直接接收item对象
const clickHandler = (item: { name: string; categoryKey: number }) => {
  // 用展开运算符创建新数组，避免直接修改原状态
  setMyNewArray(prev => [...prev, item]);
};

return (
<div>
  {items.map((item) => (
    <button onClick={() => clickHandler(item)} key={item.categoryKey}>
      {item.categoryKey}-{item.name}
    </button>
  ))}
  <h4>New array after clicking on item from above array[items]</h4>
  {myNewArray.map((item) => (
    <button onClick={() => clickHandler(item.categoryKey)} key={item.categoryKey}>
      {item.categoryKey}-{item.name}
    </button>
  ))}
</div>
);
};

export default App;

方式二：通过categoryKey查找对应对象（保留原传参逻辑） #

如果想维持原有的传categoryKey逻辑，可以在clickHandler里通过categoryKey匹配对应对象：

import React, { useState } from "react";

const App = () => {
const [items, setItems] = useState([
{ name: "Furniture", categoryKey: 1 },
{ name: "Shoes", categoryKey: 2 },
{ name: "Electronics", categoryKey: 3 },
{ name: "Clothes", categoryKey: 4 },
{ name: "Grocery", categoryKey: 5 },
]);
const [myNewArray, setMyNewArray] = useState([{ name: "demo-item", categoryKey: 100 }]);

const clickHandler = (categoryKey: number) => {
  // 找到对应categoryKey的对象
  const targetItem = items.find(item => item.categoryKey === categoryKey);
  if (targetItem) {
    // 函数式更新确保拿到最新状态
    setMyNewArray(prev => [...prev, targetItem]);
  }
};

return (
<div>
  {items.map((item) => (
    <button onClick={() => clickHandler(item.categoryKey)} key={item.categoryKey}>
      {item.categoryKey}-{item.name}
    </button>
  ))}
  <h4>New array after clicking on item from above array[items]</h4>
  {myNewArray.map((item) => (
    <button onClick={() => clickHandler(item.categoryKey)} key={item.categoryKey}>
      {item.categoryKey}-{item.name}
    </button>
  ))}
</div>
);
};

export default App;

补充说明： #

• 使用setMyNewArray(prev => [...prev, item])这种函数式更新，能确保每次更新都基于最新的数组状态，规避React状态更新的异步问题。
• 如果需要避免重复添加相同对象，可以在添加前做存在性判断：

  setMyNewArray(prev => {
    if (!prev.some(item => item.categoryKey === targetItem.categoryKey)) {
      return [...prev, targetItem];
    }
    return prev;
  });
  

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