React中如何移除数组内正负数值相同的对应元素？

我们需要修改提交逻辑，实现添加数值时若数组中存在其相反数，则同时移除两者；否则将数值加入数组的功能，同时修复几个潜在问题：

关键修改点 #

• 将输入的字符串转为数字类型，避免字符串排序、判断出错
• 使用函数式更新状态，避免闭包导致的旧状态引用问题
• 通过过滤逻辑移除目标数值及其相反数
• 渲染时避免直接修改原状态数组（sort方法会改变原数组）

完整代码 #

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [data, setData] = useState([]);
  const [number, setNumber] = useState("");

  const onDataSubmit = (event) => {
    event.preventDefault();
    // 转换输入为数字，空输入或非数字直接返回
    const num = Number(number);
    if (isNaN(num)) return;

    setData(prevData => {
      // 检查数组中是否存在当前数的相反数
      const hasOpposite = prevData.includes(-num);
      if (hasOpposite) {
        // 过滤掉当前数和它的相反数
        return prevData.filter(item => item !== num && item !== -num);
      } else {
        // 不存在相反数则添加新数
        return [...prevData, num];
      }
    });
    // 提交后清空输入框
    setNumber("");
  };

  return (
    <div className="app">
      <div className="container">
        <div className="container1">
          <div className="input">
            <input
              id="title"
              type="number"
              value={number}
              onChange={(event) => setNumber(event.target.value)}
              name="title"
              placeholder="输入数字"
            />
          </div>
          <div>
            <button className="btn" onClick={onDataSubmit}>
              提交
            </button>
          </div>
        </div>

        <div className="container2">
          {/* 复制数组后再排序，避免修改原状态数组 */}
          {[...data].sort((a, b) => a - b).join(", ")}
        </div>
      </div>
    </div>
  );
}

逻辑说明 #

1. 输入校验：提交时将输入字符串转为数字，若为空或非数字则终止操作，避免无效值进入数组
2. 状态安全更新：使用prevData获取最新状态，确保每次操作基于当前最新的数组数据
3. 相反数处理：通过includes(-num)判断是否存在相反数，存在则用filter移除两者，不存在则添加新数
4. 渲染优化：通过[...data]复制数组后再执行排序，避免sort修改原状态数组引发额外重渲染

比如原数组为[-3, 1, 2, 3, 4]，当添加3时（数组已存在-3），会同时移除-3和3，最终数组变为[1, 2, 4]，符合需求。

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