Javascript 无法使用react redux对数据进行排序？

我试图对数据进行排序，并在用户单击下拉按钮后以排序后的形式显示数据。我想根据

资金

即整数值对其进行排序。所以我在

标签上添加了

onClick

，但它不起作用，为什么

home.js：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { sortByFunded } from '../../store/actions/sortAction';

class Home extends Component {

  render() {
    const { searchTermChanged, sortByFunded } = this.props;

    return (
      <div>
        <div className="buttonContainer">
          <div>
            <button className="btn btn-primary mycustom dropdown-toggle mr-4" type="button" data-toggle="dropdown" aria-haspopup="true"
              aria-expanded="false">Sort by </button>

            <div className="dropdown-menu">
              <a className="dropdown-item" href="#">End time</a>
              <a className="dropdown-item" href="#" onClick={sortByFunded}>Percentage fund</a>
              <a className="dropdown-item" href="#">Number of backers</a>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  projects: state.search.projects,
  sort: state.sort.projects
})

export default connect(mapStateToProps, { searchTermChanged, sortByFunded })(Home);

import { SORT_BY_FUNDED } from './types';

export const sortByFunded = () => ({
    type: SORT_BY_FUNDED
});

import { SORT_BY_FUNDED } from '../actions/types';
import Projects from '../../data/projects';

const initialState = {
  projects: Projects
}

export default function (state = initialState, action) {
  switch (action.type) {
    case SORT_BY_FUNDED:
      return {
        ...state,
        projects: Projects ? Projects.sort((a, b) => a.funded - b.funded) : Projects
      };
    default:
      return state;
  }
}

sortReducer.js：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { sortByFunded } from '../../store/actions/sortAction';

class Home extends Component {

  render() {
    const { searchTermChanged, sortByFunded } = this.props;

    return (
      <div>
        <div className="buttonContainer">
          <div>
            <button className="btn btn-primary mycustom dropdown-toggle mr-4" type="button" data-toggle="dropdown" aria-haspopup="true"
              aria-expanded="false">Sort by </button>

            <div className="dropdown-menu">
              <a className="dropdown-item" href="#">End time</a>
              <a className="dropdown-item" href="#" onClick={sortByFunded}>Percentage fund</a>
              <a className="dropdown-item" href="#">Number of backers</a>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  projects: state.search.projects,
  sort: state.sort.projects
})

export default connect(mapStateToProps, { searchTermChanged, sortByFunded })(Home);

import { SORT_BY_FUNDED } from './types';

export const sortByFunded = () => ({
    type: SORT_BY_FUNDED
});

import { SORT_BY_FUNDED } from '../actions/types';
import Projects from '../../data/projects';

const initialState = {
  projects: Projects
}

export default function (state = initialState, action) {
  switch (action.type) {
    case SORT_BY_FUNDED:
      return {
        ...state,
        projects: Projects ? Projects.sort((a, b) => a.funded - b.funded) : Projects
      };
    default:
      return state;
  }
}

projects.js：

export default [  
    {  
       "s.no":0,
       "amt.pledged":15823,
       "blurb":"'Catalysts, Explorers & Secret Keepers: Women of Science Fiction' is a take-home exhibit & anthology by the Museum of Science Fiction.",
       "by":"Museum of Science Fiction",
       "country":"US",
       "currency":"usd",
       "endTime":"2016-11-01T23:59:00-04:00",
       "location":"Washington, DC",
       "funded":186,
       "backers":"219382",
       "state":"DC",
       "title":"Catalysts, Explorers & Secret Keepers: Women of SF",
       "type":"Town",
       "url":"/projects/1608905146/catalysts-explorers-and-secret-keepers-women-of-sf?ref=discovery"
    },
    {  
       "s.no":1,
       "amt.pledged":6859,
       "blurb":"A unique handmade picture book for kids & art lovers about a nervous monster who finds his courage with the help of a brave little girl",
       "by":"Tyrone Wells & Broken Eagle, LLC",
       "country":"US",
       "currency":"usd",
       "endTime":"2016-11-25T01:13:33-05:00",
       "location":"Portland, OR",
       "funded":8,
       "backers":"154926",
       "state":"OR",
       "title":"The Whatamagump (a hand-crafted story picture book)",
       "type":"Town",
       "url":"/projects/thewhatamagump/the-whatamagump-a-hand-crafted-story-picture-book?ref=discovery"
    }, ..... ]

---

在我当前的实现中，我实际上并没有将项目存储在reducer中，而是在排序时总是从源代码中提取项目。也在变异它

工作代码：

reducer.js：

import { SORT_BY_FUNDED } from '../actions/types';
import Projects from '../../data/projects';

const initialState = {
    projects: Projects
}

export default function (state = initialState, action) {
    switch (action.type) {
        case SORT_BY_FUNDED:
            return {
            ...state,
            projects: state.projects.length > 0 ? [...state.projects.sort((a,b) => a.funded - b.funded)] : state.projects
            };
        default:
            return state;
    }
}

---

在我当前的实现中，我实际上并没有将项目存储在reducer中，而是在排序时总是从源代码中提取项目。也在变异它

工作代码：

reducer.js：

import { SORT_BY_FUNDED } from '../actions/types';
import Projects from '../../data/projects';

const initialState = {
    projects: Projects
}

export default function (state = initialState, action) {
    switch (action.type) {
        case SORT_BY_FUNDED:
            return {
            ...state,
            projects: state.projects.length > 0 ? [...state.projects.sort((a,b) => a.funded - b.funded)] : state.projects
            };
        default:
            return state;
    }
}

---

我认为你的减速机执行不正确。您可能需要检查

状态.project

是否存在，而不是导入的

项目

export default function (state = initialState, action) {
  switch (action.type) {
    case SORT_BY_FUNDED:
      let projects = state.projects ? state.projects : Projects;
      return {
        ...state,
        projects: projects.sort((a, b) => a.funded - b.funded)
      };
    default:
      return state;
  }
}

---

我认为你的减速机执行不正确。您可能需要检查

状态.project

是否存在，而不是导入的

项目

export default function (state = initialState, action) {
  switch (action.type) {
    case SORT_BY_FUNDED:
      let projects = state.projects ? state.projects : Projects;
      return {
        ...state,
        projects: projects.sort((a, b) => a.funded - b.funded)
      };
    default:
      return state;
  }
}

---

你能分享

项目的样本数据吗？

？FWIW，我会使用选择器（重新选择）进行排序，而不是在状态下对数据进行排序。我倾向于将状态视为原始数据存储，选择器将数据转换为显示状态。因此，将排序和项目都存储在状态中，然后在选择器中转换它们。导入某些内容（SortByFund）然后使用同名变量也不是一个好的做法。@KeithRousseau如果这不是一个好做法，请告诉我们在react redux中命名变量的好做法是什么。您可以共享任何指南或资源吗？基本上，您不希望发生冲突，否则您必须考虑变量名称的含义。只需使用import as来重命名import中的函数。您是否可以共享

项目的示例数据？

？FWIW，我将使用选择器（重新选择）来进行排序，而不是在状态下对数据进行排序。我倾向于将状态视为原始数据存储，选择器将数据转换为显示状态。因此，将排序和项目都存储在状态中，然后在选择器中转换它们。导入某些内容（SortByFund）然后使用同名变量也不是一个好的做法。@KeithRousseau如果这不是一个好做法，请告诉我们在react redux中命名变量的好做法是什么。您可以共享任何指南或资源吗？基本上，您不希望发生冲突，否则您必须考虑变量名称的含义。只需使用import as来重命名import中的函数。