如何對數據排序並在reactjs中顯示？

Question

當用戶單擊按資金排序時，我想按排序方式顯示項目，然后按資金排序時顯示項目，但是我的代碼不起作用，為什么？ 我正在導入sortBy（）函數，並在用戶單擊按鈕時使用它。

home.js：

import React, { Component } from 'react';
import Card from '../common/card';
import Projects from '../../data/projects';
import { sortBy } from './helper';

    export default class Home extends Component {

      constructor(props) {
        super(props);
        this.state = {
          projects: Projects
        }
      }

      render() {

        return (
          <div>
              <div className="header">
                <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="#" onClick={() => sortBy('funded')}>Percentage fund</a>
                          <a className="dropdown-item" href="#" onClick={() => sortBy('backers')}>Number of backers</a>
                      </div>
                  </div>
                </div>
              </div>
              <div class="container-fluid">
                <div class="row">
                  {this.state.projects.map( (val,index) => (
                    <div class="col-3">
                      <Card title={val.title} by={val.by} blurb={val.blurb} 
                      url={val.url} funded={val.funded} backers={val.backers} imgurl={index}/>
                    </div>
                  ))}
                </div>
              </div>
          </div>
        )
      }
    }

helper.js：

import projects from '../../data/projects';

export function sortBy (searchTerm) {
    if(searchTerm === 'funded'){
        return projects.sort((a,b) => a.funded - b.funded);
    }else if(searchTerm === 'backers'){
        return projects.sort((a,b) => a.backers - b.backers);
    }
}

projects.js：

http://jsfiddle.net/0z8xcf1o/

Answer 1

1. 在渲染函數中，應該遍歷this.state.projects而不是Projects
2. 您需要更新各種狀態
3. 您的sortBy函數可以簡化，它應該為您設置狀態，最好將其添加到組件中：

--

sortBy(searchTerm) {
  this.setState({ projects: [...Projects].sort((a, b) => a[searchTerm] - b[searchTerm]) });
}

然后用

onClick={() => this.sortBy('funded')}