更改状态 onClick React+Redux答案

【问题标题】：Change state onClick React+Redux更改状态 onClick React+Redux
【发布时间】：2018-10-09 06:48:08
【问题描述】：

如何使用 onClick 事件更改 currentPage 状态的值？我想在单击带有页数的按钮后更改值。

组件：

import React from 'react';
import { connect } from 'react-redux';
import { setCurrentPage } from '../actions/pages';
const PageItem = ({ pageNumber }) => (
      <li className="page-link"
        onClick = {(e) => this.setCurrentPage(e) }
        id = { pageNumber }>
        { pageNumber }
      </li>
);
const mapStateToProps = (state) => {
  return {
    pages: state.pages.currentPage
  };
};
const mapDispatchToProps = (dispatch) => ({
  setCurrentPage: () => dispatch(setCurrentPage(pageNumber))
});
export default connect(mapStateToProps, mapDispatchToProps)(PageItem);

减速机：

const pagesReducerDefaultState = { 
 currentPage: 1
};

export default (state = pagesReducerDefaultState, action) => {
  switch (action.type) {
    case 'SET_CURRENT_PAGE':
                return action.currentPage;
    default:
        return state;
  }
}

行动：

export const setCurrentPage = (currentPage) => ({
  type: 'SET_CURRENT_PAGE',
  currentPage
});

【问题讨论】：

您是否在 Reducer 中尝试过 return ({currentPage: action.currentPage})？
可以，但还是不行。
设置页面onclick看起来不对，你试过这个吗？ onClick = {() => this.setCurrentPage(pageNumber ) }
我试过这个，我得到错误：未捕获的类型错误：无法在 onClick (PageItem.js:7) 处读取未定义的属性“setCurrentPage”
去掉this方法被导入->onClick = {() => setCurrentPage(pageNumber ) }

标签： reactjs events redux pagination onclick

【解决方案1】：

我修正了你的一些错误。首先，我假设您在根组件中创建了一个Provider 标记并创建了一个存储实例（如果您不确定，请发送 App.js 文件的内容）。

// 组件

const PageItem = ({ pageNumber, setCurrentPage }) => (
  <li
    className="page-link"
    onClick={() => setCurrentPage(pageNumber)}
    id={pageNumber}
  >
    {pageNumber}
  </li>
);

const mapStateToProps = state => {
  return {
    page: state.currentPage
  };
};
const mapDispatchToProps = {
  setCurrentPage
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(PageItem);

const pagesReducerDefaultState = {
  currentPage: 1
};

一些想法：

不能在函数中使用this，只能在类中使用
mapDispatchToProps 可以与简单的 litteral 对象一起使用（如 I learned it recently）。这样就不那么冗长了，因为您可能只提到action creator（在您的示例中，setCurrentPage）
你已经在道具中发送setCurrentPage，所以你可以像我写的那样检索它。也许 ES6 在这里是神秘的，所以 ES5 等价物将是：

function PageItem(props) {
  return (
    <li
      className="page-link"
      onClick={() => props.setCurrentPage(props.pageNumber)}
      id={props.pageNumber}
    >
      {props.pageNumber}
    </li>
  );

};

// 减速器

const initialState = {
  currentPage: 1
};

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "SET_CURRENT_PAGE":
      return {
        currentPage: action.currentPage
      };
    default:
      return state;
  }
};

您的状态是一个具有currentPage 属性的对象。所以你的减速器必须返回这种对象（所以return action.currentPage 不正确）

【讨论】：

非常感谢您的宝贵时间。我也看了你的文章，对我很有帮助。

【解决方案2】：

如下所示更新您的操作。应该调度 Action 以便 reducer 可以处理它..

export const setCurrentPage = (currentPage) => {
 return (dispatch) => {
  dispatch({type: 'SET_CURRENT_PAGE',currentPage);
 }
}

【讨论】：