如何使用Redux更新全局状态并正确调用deleteCar删除车辆条目？

看起来你遇到了两个核心问题：一是Redux全局状态cars为空，二是deleteCar函数无法正确删除车辆。让我一步步帮你解决：

1. 为什么Redux的cars状态为空？ #

你的Cars组件在componentDidMount里把API获取的数据存在了组件自身的state里，而没有同步到Redux的store中。虽然你写了mapStateToProps把Redux的cars映射到组件props，但Redux store里的cars初始是空数组，你从来没往里面加过数据，所以Car组件里打印的Redux cars自然是空的。

修复步骤： #

• 新增一个setCars action，用于把API获取的数据存入Redux store
• 修改Cars组件，去掉自身的state，从Redux props获取cars，并在componentDidMount里dispatch action同步数据

修改后的Cars组件：

import React from "react";
import Car from "../Car";
import { connect } from "react-redux";
import { setCars } from "../../actions/setCars";

class Cars extends React.Component {
  componentDidMount() {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        // 将数据同步到Redux store
        this.props.setCars(data);
      });
  }

  render() {
    // 从Redux props中获取cars，不再使用组件自身state
    const { cars } = this.props;
    return (
      <div>
        {cars.map(c => (
          <Car key={c.id} make={c.make} price={c.price} id={c.id} />
        ))}
      </div>
    );
  }
}

const mapStateToProps = reduxStoreState => {
  return { cars: reduxStoreState.cars };
};

// 映射setCars action到组件props
export default connect(mapStateToProps, { setCars })(Cars);

对应的setCars action文件：

import { SET_CARS } from "../constants";

export const setCars = (payload) => {
  return { type: SET_CARS, payload: payload };
};

修改Reducer，添加SET_CARS的处理逻辑：

import { ADD, DELETE, EDIT, SET_CARS } from "../constants";

export default function(state = { cars: [] }, action) {
  switch (action.type) {
    case SET_CARS:
      return { ...state, cars: action.payload };
    case ADD:
      return { ...state, cars: [...state.cars, action.payload] };
    case DELETE:
      return { ...state, cars: state.cars.filter(obj => obj.id !== action.payload) };
    case EDIT:
      return { ...state, cars: action.payload };
    default:
      return state;
  }
}

2. deleteCar无法正确删除车辆的问题 #

你的Reducer里DELETE的过滤条件是obj !== action.payload，但action.payload是一个新创建的对象（你在Car组件里传的{ id: id, make: make, price: price }），而Redux store里的车辆对象是另一个引用，所以这个比较永远为true，过滤不掉任何元素。

修复步骤： #

• 简化deleteCar的参数，只传递车辆id即可，无需整个对象
• 修改Reducer里的过滤逻辑，通过id匹配来删除对应车辆

修改后的Car组件：

import React from "react";
import { deleteCar } from "../../actions/delete";
import { connect } from "react-redux";

const Car = ({ deleteCar, make, price, id }) => {
  return (
    <div className="card m-4">
      <div className="row">
        <div className="col">
          <h3>{make}</h3>
          <p>{price}</p>
        </div>
      </div>
      <div className="row">
        {/* 仅传递id给deleteCar */}
        <button className="btn btn-danger" onClick={() => deleteCar(id)} >
          Delete Car
        </button>
      </div>
    </div>
  );
};

// 如果Car组件不需要访问Redux的cars状态，可以去掉mapStateToProps
const mapStateToProps = reduxStoreState => {
  return { cars: reduxStoreState.cars };
};

export default connect(mapStateToProps, { deleteCar })(Car);

修改后的deleteCar action：

import { DELETE } from "../constants";

// payload现在是车辆id
export const deleteCar = (payload) => {
  return { type: DELETE, payload: payload };
};

3. 额外优化建议 #

• 如果Car组件不需要使用Redux的cars状态，可以直接去掉mapStateToProps，让组件更轻量化：

  export default connect(null, { deleteCar })(Car);
  

• 确保你的Redux store已正确配置该reducer，比如在根reducer中合并：

  import { createStore } from "redux";
  import rootReducer from "./reducers";
  
  const store = createStore(rootReducer);
  export default store;
  

这样修改后，Redux的cars状态会被正确初始化，点击删除按钮也能正确删除对应的车辆了。

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