调用this.props.dispatch时报错“不是函数”，无法删除数据库条目

嘿，这个问题我熟！你碰到的_this.props.dispatch is not a function错误，核心原因是你的JobItem组件还没和Redux的store挂上钩，所以props里根本没有dispatch这个方法。下面给你几个实用的解决办法，你可以根据自己的项目情况选：

• 用connect高阶组件包裹组件（经典常用方案）
  首先得从react-redux里导入connect，然后在组件导出的时候用它包裹。如果你的组件只需要触发action、不需要获取store里的state，第一个参数传null就行。另外，推荐把action直接映射到props里，不用手动写dispatch：

  import { connect } from 'react-redux';
  import { deleteJob } from './path/to/your/actions'; // 导入你的删除action
  
  class JobItem extends Component {
    constructor(props) {
      super(props)
      this.state = { activeRowKey: null, deleting: false };
    }
  
    onDelete = () => {
      // 直接调用映射到props里的deleteJob，connect会自动帮你dispatch
      this.props.deleteJob(this.props.id);
    }
  
    // ... 组件其他逻辑和渲染代码
  }
  
  // 把action映射到组件props
  const mapDispatchToProps = {
    deleteJob
  };
  
  // 导出连接后的组件，这步很关键！
  export default connect(null, mapDispatchToProps)(JobItem);
  

  要是你偏想手动调用dispatch，也可以这么写mapDispatchToProps：

  const mapDispatchToProps = (dispatch) => {
    return {
      handleDelete: (id) => dispatch(deleteJob(id))
    };
  };
  // 然后组件里调用this.props.handleDelete(this.props.id)
  

• 用useDispatch Hook（函数组件推荐方案）
  如果你的项目支持React Hooks（React Redux v7.1+），把JobItem改成函数组件会更简洁：

  import { useDispatch } from 'react-redux';
  import { useState } from 'react';
  import { deleteJob } from './path/to/your/actions';
  
  const JobItem = (props) => {
    const dispatch = useDispatch();
    const [activeRowKey, setActiveRowKey] = useState(null);
    const [deleting, setDeleting] = useState(false);
  
    const onDelete = () => {
      dispatch(deleteJob(props.id));
    };
  
    // ... 组件其他逻辑和JSX渲染
    return (/* 你的组件内容 */);
  };
  
  export default JobItem;
  

• 确认组件在Redux Provider的范围内
  最后别忘了检查根组件：你的整个应用必须被Provider包裹，这样所有子组件才能访问到Redux store。确保根组件代码类似这样：

  import { Provider } from 'react-redux';
  import store from './path/to/your/store';
  import App from './App';
  
  ReactDOM.render(
    <Provider store={store}>
      <App /> {/* JobItem必须是App的子组件，或者在App的子树里 */}
    </Provider>,
    document.getElementById('root')
  );
  

  要是JobItem不在Provider的子树里，就算用了connect或者Hook也拿不到dispatch哦。

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