React中出现‘JSX元素类型无构造或调用签名’错误求助

核心错误原因 #

你直接把数组CharactersAdded当作React组件渲染（<CharactersAdded />），但React要求组件必须是函数或类类型，数组不具备组件的构造/调用签名，所以触发了这个错误。

代码里的其他问题 #

• 直接用document.getElementById操作DOM不符合React的状态管理逻辑，而且你要获取的passButon元素在组件渲染前可能还不存在，会导致test为null。
• CharactersAdded是普通变量，修改它不会触发组件重新渲染，就算修复了渲染问题，点击按钮后页面也不会更新。
• addUserPassword里每次添加的都是同一个test元素，而不是用户点击的按钮对应的表情字符。

修正后的完整代码 #

import { useState } from "react";
import { Delete } from "lucide-react";

export function PasswordButtons() {
  // 用useState管理选中的字符数组，初始为空
  const [charactersAdded, setCharactersAdded] = useState<string[]>([]);

  const addUserPassword = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    // 获取点击按钮的文本内容
    const clickedChar = e.currentTarget.textContent;
    if (clickedChar) {
      // 更新状态，添加新字符
      setCharactersAdded(prev => [...prev, clickedChar]);
    }
  };

  const eraseCharacter = () => {
    // 更新状态，移除最后一个字符
    setCharactersAdded(prev => prev.slice(0, -1));
  };

  return (
    <div>
      <button className="passButton" onClick={addUserPassword}> ❤️ </button>
      <button className="passButton" onClick={addUserPassword}> 💛 </button>
      <button className="passButton" onClick={addUserPassword}> 💚 </button>
      <button className="passButton" onClick={addUserPassword}> 💙 </button>
      <button className="passButton" onClick={addUserPassword}> 💜 </button>
      <button className="passButton" onClick={addUserPassword}> 🖤 </button>
      <button className="passButton" onClick={addUserPassword}> 🤍 </button>
      <button className="passButton" onClick={addUserPassword}> 🤎 </button>
      <button className="passButton" onClick={addUserPassword}> 🧡 </button>
      <button onClick={eraseCharacter}>
        <Delete className="DeleteButton" />
      </button>
      <br />
      {/* 正确渲染数组：把字符拼接成字符串显示 */}
      <p>{charactersAdded.join('')}</p>
    </div>
  );
}

关键修改点 #

1. 使用useState定义charactersAdded状态，确保修改后触发组件重新渲染。
2. 在addUserPassword中通过e.currentTarget.textContent获取用户点击的表情字符，添加到状态数组。
3. 用slice方法生成新数组来更新状态（避免直接修改原数组，符合React状态不可变原则）。
4. 渲染时通过join('')把数组中的字符拼接成字符串，直接显示在<p>标签里，而不是把数组当组件用。

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