React-Redux表单错误渲染问题：提交Pokemon无法提取错误信息

问题根源 #

1. 错误信息未正确解析：jQuery的$.ajax失败时传入的err是jqXHR对象，包含请求的所有上下文（函数、状态码等），而非后端返回的纯错误数据。直接将其传给Redux action会导致state中存储大量无用数据。
2. Reducer错误存储结构：当前错误reducer直接返回整个action对象，导致state中的错误切片包含type字段和冗余数据，而非纯净的错误信息。
3. 后端错误响应未正确提取：Rails验证失败时会返回JSON格式的错误（通常结构为{ errors: { name: ["can't be blank"] } }），需要从jqXHR对象的responseJSON属性中提取。

分步修复 #

1. 修正Redux Action中的错误解析 #

修改createNewPokemon action，从jqXHR对象中提取后端返回的错误数据：

export const createNewPokemon = (pokemon) => (dispatch) => (
    APIUtil.createPokemon(pokemon).then(
        (payload) => {
            dispatch(receiveOnePokemon(payload));
            return payload;
        }, 
        (err) => {
            // 提取Rails返回的错误信息，err.responseJSON包含后端的JSON响应
            const errors = err.responseJSON?.errors || {};
            dispatch(receivePokemonErrors(errors));
            // 返回错误让组件处理（可选）
            return Promise.reject(errors);
        }
    )
)

2. 修正错误Reducer的存储逻辑 #

让reducer只存储错误信息，而非整个action对象：

import { RECEIVE_POKEMON_ERRORS } from "../actions/pokemon_actions";

const errorsReducer = (state = {}, action) => {
    switch(action.type) {
        case RECEIVE_POKEMON_ERRORS:
            // 直接存储action中的errors字段，而非整个action
            return { ...action.errors };
        default:
            return state;
    }
}

export default errorsReducer;

3. 在表单组件中连接错误状态并渲染 #

首先用connect将Redux中的错误state映射到组件props：

import { connect } from 'react-redux';

const PokemonForm = ({ errors, createNewPokemon, navigate }) => {
    // 组件内部逻辑（state、handleSubmit等）
    const [formState, setFormState] = useState({ name: "", items: [], moves: [] });
    
    const handleSubmit = (e) => {
        e.preventDefault();
        props.createNewPokemon(formState).then(newPokemon => {
            navigate(`pokemon/${Object.keys(newPokemon.pokemon)[0]}`)
        }).catch(err => {
            // 可选：捕获错误做额外处理
        });
    };

    // 渲染错误信息
    const renderErrors = () => {
        if (!Object.keys(errors).length) return null;
        return (
            <div className="errors">
                {Object.values(errors).map((msgs, idx) => (
                    <div key={idx} className="error-message">
                        {msgs.join(', ')}
                    </div>
                ))}
            </div>
        );
    };

    return (
        <form onSubmit={handleSubmit}>
            {renderErrors()}
            {/* 表单输入字段 */}
            <input 
                type="text" 
                name="name" 
                placeholder="Pokemon名称"
                value={formState.name}
                onChange={(e) => setFormState({...formState, name: e.target.value})}
            />
            {/* 道具、招式输入字段省略 */}
            <button type="submit">提交</button>
        </form>
    );
};

// 映射Redux state到组件props
const mapStateToProps = (state) => ({
    errors: state.errors // 假设错误reducer挂载在state的errors切片下
});

// 映射action到props
const mapDispatchToProps = {
    createNewPokemon
};

export default connect(mapStateToProps, mapDispatchToProps)(PokemonForm);

4. 可选：重置错误状态（避免页面切换后错误残留） #

添加一个清除错误的action和reducer逻辑，防止错误信息在页面切换后残留：

// action
export const clearPokemonErrors = () => ({
    type: CLEAR_POKEMON_ERRORS
});

// reducer
import { RECEIVE_POKEMON_ERRORS, CLEAR_POKEMON_ERRORS } from "../actions/pokemon_actions";

const errorsReducer = (state = {}, action) => {
    switch(action.type) {
        case RECEIVE_POKEMON_ERRORS:
            return { ...action.errors };
        case CLEAR_POKEMON_ERRORS:
            return {};
        default:
            return state;
    }
}

export default errorsReducer;

// 组件中使用，在卸载时清除错误
useEffect(() => {
    return () => {
        props.clearPokemonErrors();
    };
}, [props.clearPokemonErrors]);

5. 验证后端响应格式 #

确保Rails控制器在验证失败时返回正确的JSON格式：

# app/controllers/api/pokemon_controller.rb
def create
    @pokemon = Pokemon.new(pokemon_params)
    if @pokemon.save
        render json: @pokemon
    else
        # 返回422状态码和标准错误JSON
        render json: { errors: @pokemon.errors }, status: :unprocessable_entity
    end
end

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