Reactjs 在reducer中更改状态后未更新组件

我想向我的用户显示错误。操作将引发错误，并在reducer中更新错误和消息。但由于某些原因，我无法获取要向用户显示的错误或消息。减速器或mapStateToProps是否有问题？组件如何知道状态已更新？我不知道如何更新

我错过了什么

减速器：

import {CREATE_VEHICLE,VEHICLE_ERROR, 
VEHICLE_FORM_PAGE_SUBMIT,FETCH_VEHICLES_SUCCESS} from '../actions/vehicles';

const initialState={message: null, error: null, vehicle:{}};

 export default function vehicleReducer(state=initialState, action) {
console.log("in reducer");
switch(action.type){
case CREATE_VEHICLE:
    return [...state, Object.assign({}, action.vehicle, action.message)];
case VEHICLE_ERROR:
    return{
    ...state,
        error: action.error,
        message: action.message
    };
    default:
        return state;
}
}

行动：

export const vehicleError = (error, msg) => {
return{
type: VEHICLE_ERROR,
error:error,
message: msg
}

};

export const createVehicle=(vehicle) =>{
console.log("vehicle: ", vehicle);

return (dispatch) => {
    return axios.post(`http://localhost:9081/api/bmwvehicle/create`, 
vehicle)

    .then((response) =>{
        if (response.ok){
            console.log("success");
             dispatch(createVehicleSuccess(response.data))

        }}, (error) => {
                if (error.response.status == 500){
                dispatch(vehicleError(error.message, "Could not add vehicle, 
please try again."));

            }

        }
    );
};};

组成部分：

class Vehicle extends React.Component{
 constructor(props){
        super(props);
      }


      submitVehicle(input){
        this.props.createVehicle(input);
        }

      render(){
          console.log("the error is: ",this.props.error);
            return(
                    <div>
                        <AddVehicle submitVehicle= 
{this.submitVehicle.bind(this)} /> 
                    </div>

                )
      }
}

      const mapStateToProps=(state, ownProps) => {
          return{
              vehicle: state.vehicle,
              message: state.message,
              items: state.items,
              vehicles: state.vehicles,
              error: state.error
          }
      };

      const mapDispatchToProps=(dispatch)=>{
          return {
              createVehicle: vehicle => 
dispatch(vehicleActions.createVehicle(vehicle))
          }
      };


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

class车辆部件{
建造师（道具）{
超级（道具）；
}
子车辆（输入）{
this.props.createVehicle（输入）；
}
render（）{
log（“错误是：”，this.props.error）；
返回(
)
}
}
const mapStateToProps=（state，ownProps）=>{
返回{
车辆：state.vehicle，
message:state.message，
项目：state.items，
车辆：国家车辆，
错误：state.error
}
};
const mapDispatchToProps=（调度）=>{
返回{
createVehicle:vehicle=>
调度（车辆调度。创建车辆（车辆））
}
};
导出默认连接（mapStateToProps、mapDispatchToProps）（车辆）；

在你的“创建车辆”行动中，我想你是想用大括号返回状态<代码>{…状态，对象.assign（{}，action.vehicle，action.message）}

在MapStateTrops中，您尝试访问

状态.vehicles

和

状态.items

，但它在默认初始状态

常量initialState={消息：null，错误：null，车辆：{}

中不存在

---

要回答您关于组件如何知道（redux）状态已更新的问题，组件会知道，因为您将其包装在名为connect（）的redux HoC中，它将在映射的redux状态更改时通过更新通知组件。在您的情况下，组件将在redux商店的state.vehicle、state.message、state.items、state.vehicles和state.error发生更改时更新。

您已经包含了大部分相关代码，这很好，但我建议您也创建一个最小的代码沙盒（），它实际上是一个工作的react应用程序。代替api调用，只需两个按钮，一个用于使用硬编码数据分派createVehicleSuccess操作，另一个用于使用硬编码错误信息分派vehicleError。然后你可以在帖子中指出这一点，有人可以帮助你更快地指出/修复错误。我认为你的问题是，如果响应状态代码不是500，你就会放弃错误。我认为如果出现错误，最好打电话给vehicleError。