如何将react"onClick"监听器中的此错误修复为函数，而获得了"string&qu

Question

我在react中有以下代码：

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侦听器应为函数，而得到的却是CCD_ 3类型的值。

我需要_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>
)
}