React遍历数组渲染元素时调用删除函数触发TypeError错误

问题描述 #

我在ReactJS中编写了一段遍历数组元素的代码，为每个元素设置了一个删除按钮，用于从数据库中删除对应元素。编译时代码抛出如下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')

我的JSX代码如下：

{(zakazani.map((termin, key) => (
    <tr key={key+1} className="border-t-2 border-b-2 py-4 bg-slate-100 border-slate-200">
         <td className="pl-4 border-r-2 border-slate-200">{key+1}</td>
         <td className="pl-4 border-r-2 border-slate-200">{termin.name}</td>
         <td className="pl-4 border-r-2 border-slate-200">{termin.phone}</td>
         {(termin.time >= 1000) ? (
            <td className="pl-4 border-r-2 border-slate-200">
                {Math.floor(termin.time / 100)}:{termin.time % 100} - {((termin.time % 100 >= 15) ? Math.floor(termin.time / 100) + 1 : Math.floor(termin.time / 100))}:{(termin.time % 100 + 45) % 60}
            </td>
         ) : (
            <td className="pl-4 border-r-2 border-slate-200">
                {Math.floor(termin.time / 100)}:{termin.time % 100} - {((termin.time % 100 >= 15) ? Math.floor(termin.time / 100) + 1 : Math.floor(termin.time / 100))}:{(termin.time % 100 + 45) % 60}
            </td>
         )}
         <td className="pl-2">
            <button 
            onDoubleClick={deleteOne(termin.time, termin.id)}
            className="text-white bg-sky-600 w-10 h-10 flex justify-center px-1 pt-3 rounded-sm mt-2 mb-1 shadow-sm shadow-sky-200"><FaTrash /></button>
        </td>
    </tr>
))}

错误原因 #

核心问题出在删除按钮的onDoubleClick绑定上：你直接调用了deleteOne(termin.time, termin.id)，这会导致组件渲染时就立即执行这个函数，而非双击时才触发。如果deleteOne函数内部依赖了渲染数组的zakazani状态，执行后可能修改状态导致数组变为undefined，后续遍历或函数内部使用indexOf时就会抛出"Cannot read properties of undefined"的错误。

解决方案 #

将onDoubleClick的绑定改成箭头函数，确保只有双击时才执行deleteOne：

<button 
    onDoubleClick={() => deleteOne(termin.time, termin.id)}
    className="text-white bg-sky-600 w-10 h-10 flex justify-center px-1 pt-3 rounded-sm mt-2 mb-1 shadow-sm shadow-sky-200">
    <FaTrash />
</button>

额外优化建议：

• 不要用key+1作为元素的key，直接用元素的唯一标识termin.id更稳妥，避免数组元素顺序变化时出现渲染异常。
• 你的三元判断逻辑完全重复，可以简化为单个td，无需写两份相同内容。

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