Question

如何使用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
});

Answer 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可以与简单的垃圾对象（如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不正确）

Answer 2

如下更新您的操作。应该调度动作，以便减速器可以处理它。.

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

更改状态onClick React + Redux

2 个答案: