点击按钮向JavaScript数组追加元素失败，元素被替换问题求助

问题原因 #

你当前的代码里，result数组是在handleFilter函数内部声明的局部变量，每次点击按钮调用函数时，都会重新创建一个空数组，所以每次只能添加当前点击的元素，之前的选择无法保留。

修复方案 #

情况1：普通JavaScript环境（无框架）

把数组放在函数外部，作为全局变量（或闭包变量）来保存状态：

// 将数组放在函数外部，持久化保存状态
let result = [];

const handleFilter = (filterType) => {
  // 可选：避免重复添加同一元素
  if (!result.includes(filterType)) {
    result.push(filterType);
  }
  console.log(result);
}

HTML部分保持不变即可：

<button onClick={() => handleFilter('chairs')}>chairs</button>
<button onClick={() => handleFilter('sofas')}>sofas</button>
<button onClick={() => handleFilter('tables')}>tables</button>

情况2：React环境（你的代码写法更接近React场景）

使用React的useState钩子管理状态，确保状态能被组件持久化保存：

import { useState } from 'react';

function FilterComponent() {
  // 初始化空数组作为状态
  const [result, setResult] = useState([]);

  const handleFilter = (filterType) => {
    // 可选：避免重复添加
    if (!result.includes(filterType)) {
      // 用函数式更新获取最新状态，避免状态更新滞后
      setResult(prev => [...prev, filterType]);
    }
  };

  return (
    <>
      <button onClick={() => handleFilter('chairs')}>chairs</button>
      <button onClick={() => handleFilter('sofas')}>sofas</button>
      <button onClick={() => handleFilter('tables')}>tables</button>
    </>
  );
}

效果验证 #

点击chairs后数组为["chairs"]，点击sofas后变为["chairs","sofas"]，以此类推，每次点击都会追加新元素到数组中。

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