如何为React数组中的字符串值追加指定字符串？

核心问题分析 #

你的代码存在三个关键问题导致功能失效：

1. 状态变量混乱：handleAddClick操作language状态，handleItemChanged却操作subtitle和name状态，变量完全不对应，数据流转断裂。
2. 重复追加逻辑错误：每次输入都会把输入框当前值（已含"test"）再次拼接"test"，导致出现Johntesttest这类重复结果。
3. 验证逻辑错位：用原始输入值和数组中已追加后的字符串做重复校验，逻辑不匹配，容易误判或漏判。

修正后的代码示例 #

方案1：直接存储追加后的字符串（输入框显示带"test"的内容）

import { useState } from 'react';

function App() {
  // 统一状态变量，初始化目标数组
  const [nameList, setNameList] = useState(["Johntest", "Miketest"]);
  const [errorValidation, setErrorValidation] = useState("");

  // 添加空项
  const handleAddClick = () => {
    setNameList([...nameList, ""]);
  };

  // 处理输入变更
  const handleItemChanged = (event, index) => {
    const inputValue = event.target.value;
    // 提取原始输入值（去除可能已存在的"test"后缀）
    const rawValue = inputValue.replace(/test$/, "");
    // 生成最终要存储的字符串
    const processedValue = rawValue ? rawValue + "test" : "";

    const newList = [...nameList];
    // 校验重复：排除当前修改项，检查是否有相同的处理后字符串
    const hasDuplicate = newList.some((item, idx) => idx !== index && item === processedValue);

    if (hasDuplicate) {
      setErrorValidation("Names cannot be equal!");
    } else {
      setErrorValidation("");
      newList[index] = processedValue;
      setNameList(newList);
    }
  };

  return (
    <div>
      {nameList.map((item, idx) => (
        <input
          key={idx}
          value={item}
          onChange={(e) => handleItemChanged(e, idx)}
          placeholder="Enter name"
        />
      ))}
      <button onClick={handleAddClick}>Add Item</button>
      {errorValidation && <p style={{ color: 'red' }}>{errorValidation}</p>}
    </div>
  );
}

export default App;

方案2：输入框显示原始值，存储时自动追加"test"（更友好的用户体验）

如果希望用户输入时看到的是不带"test"的原始值，只需调整输入框的value绑定：

// 渲染输入框时替换为：
<input
  key={idx}
  value={nameList[index].replace(/test$/, "")}
  onChange={(e) => handleItemChanged(e, idx)}
  placeholder="Enter name"
/>

关键注意事项 #

• 统一状态变量：所有操作必须针对同一个状态（如示例中的nameList），确保数据同步。
• 避免重复追加：每次处理输入时，先清除已有的"test"后缀，再重新拼接，防止多层重复。
• 校验逻辑精准：校验重复时要排除当前正在修改的项，避免把自己当成重复项。

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