Javascript React和Redux:Onclick Delete按钮返回未定义

在下面的代码中，我有一个删除按钮，如果单击该按钮，应该会删除数据。但是，当我单击它时，我通过console.log看到它返回的是未定义的id号，而不是id号。我似乎不明白为什么。任何帮助都将不胜感激。多谢各位

//动作文件

export const GET_ITEMS           = 'GET ITEMS';
export const FETCH_ITEMS_SUCCESS = 'FETCH ITEMS SUCCESS';
export const FETCH_ITEMS_ERROR   = 'FETCH ITEMS ERROR';
export const DELETE_ITEM         = 'DELETE_ITEM';

    export const getItems = () => ({
      type: GET_ITEMS
    });
    
    export const deleteItem = (itemId) => ({
      type   : DELETE_ITEM,
      payload: itemId
    });

//App.js

    class App extends Component {
      componentDidMount() {
        this.props.getItems()
      }
    
    static propTypes = {
      getItems: PropTypes.func.isRequired,
      deleteItem: PropTypes.func.isRequired
    }
    handleDelete = (id) =>{
      this.props.deleteItem(id)
      console.log(this.props.deleteItem(id));
    }
    
    
      render() {
    const { itemsList} = this.props.items
        return (
          <div className="container app-wrapper">
            <header>
            {itemsList.map(item => (<h1 key={item.id}>{item.title} <button onClick={this.handleDelete.bind(this, item.id)}>delete</button></h1>))}
            </header>
          </div>
        );
      }
    }
    
    const mapStateToProps = state => ({
      items: state.items
    });
    export default connect(mapStateToProps, {getItems, deleteItem})(App);

类应用程序扩展组件{
componentDidMount（）{
this.props.getItems（）
}
静态类型={
getItems:PropTypes.func.isRequired，
deleteItem:PropTypes.func.isRequired
}
handleDelete=（id）=>{
this.props.deleteItem（id）
log（this.props.deleteItem（id））；
}
render（）{
const{itemsList}=this.props.items
返回(
{itemsList.map（item=>（{item.title}delete））}
);
}
}
常量mapStateToProps=状态=>({
项目：state.items
});
导出默认连接（MapStateTops，{getItems，deleteItem}）（应用程序）；

调度的操作应该返回

未定义的
，因为它不返回任何内容。您误解了Redux/reducer模式中的数据流动方式

以下是Redux更新的基本流程：

行动已发出
所有减速器都接收动作对象
所有减速器都会根据该动作的内容返回其新的或以前的状态
connect
查看Redux状态已更改，并触发子组件的重新呈现
现在，您可以通过props（映射到
mapStateToProps
）使用Redux存储中更新的数据
不能调用操作并接收更新状态作为返回值。它打破了Redux中数据流动/更新的基本模式。
您在connect中错误地引用了删除操作。deleteItem需要传入一个id参数

试试这个

const mapStateToProps = state => ({
      items: state.items
    });

const mapDispatchToProps = (dispatch) =>
{
    return {
        deleteItem: (id) => dispatch(actions.deleteItem(id)),
    }
}

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

您在
handleDelete
函数中执行了
console.log（id）
，它返回
undefined
？我们能看到减速机吗？当我console.log（id）返回正确的id时不能。但是，当我console.log（this.props.deleteItem（id））返回未定义。
console.log（this.props.deleteItem（id））
不能返回其他值，它是否正确删除了您的项目？谢谢Brian。这使得问题得到了合理的解决。谢谢你一步一步的解释。你不必这么做。。。映射将自动保留函数签名和绑定分派。这只是添加了一个额外的功能，没有额外的功能。