React-Redux旧项目报错：nativeEvent.path未定义问题排查

问题背景 #

跟着旧教程开发React-Redux角色表，教程代码存在过时内容，目前遇到跨浏览器报错：

• Firefox：ERROR action.payload.nativeEvent.path is undefined
• Opera GX：Cannot read properties of undefined (reading '1') TypeError: Cannot read properties of undefined (reading '1')

问题根源是依赖了非标准的nativeEvent.path属性，该属性浏览器支持不一致且已不推荐使用，同时原代码通过事件对象遍历DOM路径获取id的方式既脆弱又不符合Redux最佳实践。

解决方案 #

1. 修改Trait.js组件：直接传递id给事件处理函数 #

不再依赖事件对象获取DOM元素的id，直接将组件的id参数传给更新和删除函数：

<div className='trait' id={id}>
  <textarea 
    value={trait} 
    cols='50' 
    onChange={(e) => updateTrait(id, e.target.value)}
  />
  <button
    type='button'
    className='red delete deleteTrait'
    onClick={() => removeTrait(id)}
  >
    x
  </button>
</div>

2. 调整traitsActions.js：传递业务数据而非事件对象 #

让action直接携带需要的id和值，避免传递整个事件对象：

import {
    ADD_TRAIT,
    UPDATE_TRAIT,
    REMOVE_TRAIT
} from '../constants/actionTypes';

export const updateTrait = (id, value) => ({
    type: UPDATE_TRAIT,
    payload: { id, value }
})

export const addTrait = () =>({
    type: ADD_TRAIT
})

export const removeTrait = (id) => ({
    type: REMOVE_TRAIT,
    payload: id
})

3. 重构traitsReducer.js：简化逻辑并使用传递的id #

去掉依赖事件对象的逻辑，直接用action.payload中的id操作数据，同时优化id生成和状态更新逻辑：

import {
    ADD_TRAIT,
    REMOVE_TRAIT,
    UPDATE_TRAIT
} from '../constants/actionTypes';

const initialState = [];

const traitsReducer = (state = initialState, action) => {
    switch(action.type){
        case ADD_TRAIT:
            // 找到第一个未被占用的id，若所有连续id都被使用则用数组长度
            const unusedId = state.findIndex((_, index) => !state.some(item => item.id === index));
            const newTrait = {
                trait: '',
                id: unusedId === -1 ? state.length : unusedId
            };
            return [...state, newTrait];
        case UPDATE_TRAIT:
            // 直接匹配id更新对应属性
            return state.map(trait => 
                trait.id === action.payload.id 
                ? { ...trait, trait: action.payload.value }
                : trait
            );
        case REMOVE_TRAIT: 
            // 根据传入的id过滤数据
            return state.filter(trait => trait.id !== action.payload);
        default:
            return state;
    }
}

export default traitsReducer;

改动说明 #

• 彻底移除对非标准nativeEvent.path的依赖，解决跨浏览器兼容问题；
• Action仅传递必要的业务数据，符合Redux"数据驱动"的设计理念；
• Reducer逻辑更简洁高效，使用数组方法替代冗余的循环和对象拷贝；
• 修复原ADD_TRAIT中id生成的逻辑漏洞，确保id唯一且连续可用。

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