如何将“`onClick`”侦听器中的这个错误修复为一个函数，而不是得到一个‘`string`’类型的值

Question

我有这样的反应：

const [categoryId, setCategoryId] = useState("");

{
  catName.map((singleCategory, index) => {
    const { catName, _id: categoryId } = singleCategory;

    return (
      <>
        <div
          className="category-single-div flex-3 center-flex-align-display"
          key={index}
        >
          <p className="text-general-small2 category-custom-text">{catName}</p>
          <div className="category-icons-div ">
            <FaEdit
              className="category-icon-edit"
              onClick={() => {
                setEditCategory(true);
                setCategoryId(categoryId);
              }}
            />
            <AiFillDelete className="category-icon-edit category-icon-delete" />
          </div>
        </div>
      </>
    );
  });
}

我使用map获取对象数组，当用户单击编辑按钮时，我需要它们各自的_id。我还想通过onClick在同一个编辑按钮上调用另一个函数。它正在工作，但显示了一个错误。

警告:期望onClick侦听器是一个函数，而得到一个string类型的值。

我需要那个_id，以便将它传递到一个状态，并在顶层组件中具有全局访问它的权限。这可行吗？

Answer 1

您的问题来自于FaEdit组件。

            <FaEdit
              id={categoryId}
              className="category-icon-edit"
              onClick={(editCategory, id) => { // you need to have onClick as a prop defined inside the FaEdit component
                setEditCategory(editCategory);
                setCategoryId(id);
              }}
            />

例如..。

export default function FaEdit({className, onClick, categoryId}){
    const handleChange() => {
       onClick(true, categoryId)
    }
    return(
    <div className={className} onClick={() => handleChange()}>Click</div>
    )
}