编辑联系表单表格数据时触发findIndex未定义错误的解决方法

报错Uncaught TypeError: Cannot read properties of undefined (reading 'findIndex')的核心原因是**AddFormData的值为undefined**，调用findIndex方法时自然会抛出错误。以下是具体排查和解决步骤：

1. 检查GlobalContext的状态初始化 #

确保在GlobalContext的Provider中，AddFormData的初始值是一个空数组，而不是undefined或null：

// GlobalContext中的状态初始化示例
const [AddFormData, setAddFormData] = useState([]);

2. 确认组件在Context Provider范围内 #

EditRow组件必须被GlobalContext.Provider包裹，否则useContext(GlobalContext)会返回默认值（通常是undefined）。检查组件层级，确保EditRow在Provider的子树中。

3. 在提交函数中增加安全校验 #

在handleEditFormSubmit中先校验AddFormData和editContactId的有效性，避免无效操作：

const handleEditFormSubmit = (event) => {
    event.preventDefault();

    // 校验AddFormData是否存在
    if (!AddFormData) return;
    // 校验编辑ID是否有效
    if (!editContactId) return;

    const editedContact = {
        id: editContactId,
        fullName: editFormData.fullName,
        email: editFormData.email,
        phoneNumber: editFormData.phoneNumber,
        country: editFormData.country,
    };

    const newAddFormData = [...AddFormData];
    const index = AddFormData.findIndex((formData) => formData.id === editContactId);

    // 校验是否找到对应项
    if (index === -1) return;

    newAddFormData[index] = editedContact;
    setAddFormData(newAddFormData);
    setEditContactId(null);
};

4. 排查editFormData的有效性 #

额外检查editFormData是否被正确初始化，避免保存空值或无效数据。

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