按类别排序在React组件中不起作用

Question

我想我的问题是在钻研从sortTypes获得正确的方法？

我的助手函数(向上、向下、需要排序以获取相应的字体图标)：

const sortTypes = {
  Up: {
    fn: {
      age: (a, b) => (a.age - b.age ? 1 : -1),
      cores: (a, b) => (a.cpuUsage - b.cpuUsage ? 1 : -1),
      memory: (a, b) => (a.memoryUsage - b.memoryUsage ? 1 : -1)
    }
  },
  Down: {
    fn: {
      age: (a, b) => (b.age - a.age ? 1 : -1),
      cores: (a, b) => (b.cpuUsage - a.cpuUsage ? 1 : -1),
      memory: (a, b) => (b.memoryUsage - a.memoryUsage ? 1 : -1)
    }
  },
  Sort: {
    fn: {
      age: (a, b) => (b.age - a.age ? 1 : -1),
      cores: (a, b) => (b.cpuUsage - a.cpuUsage ? 1 : -1),
      memory: (a, b) => (b.memoryUsage - a.memoryUsage ? 1 : -1)
    }
  }
};

export default sortTypes;

以及使用它的组件：

class BottomPanel extends Component {
  state = {
    currentSort: 'Sort',
    category: ''
  };

  onSortChange = e => {
    console.log(e.currentTarget.id);

    const { currentSort } = this.state;

    let nextSort, category;

    if (currentSort === 'Down') nextSort = 'Up';
    else if (currentSort === 'Up') nextSort = 'Sort';
    else if (currentSort === 'Sort') nextSort = 'Down';

    if (e.currentTarget.id === 'btn-age') category = 'age';
    else if (e.currentTarget.id === 'btn-cores') category = 'cores';
    else if (e.currentTarget.id === 'btn-memory') category = 'memory';

    this.setState({
      currentSort: nextSort,
      category: category
    });
  };

  render() {
    console.log(this.state.category);
    const { runningTasks } = this.props;
    const { currentSort, category } = this.state;

    return (
      runningTasks.length >= 0 && (
        <div className="bottom-panel">
          <div className="table-header row">
            <div className="column name">
              <span>Name</span>
            </div>
            <div className="column task-status">
              <span>Status</span>
            </div>
            <div className="column label">
              <span>Label</span>
            </div>
            <div className="column age">
              <span>
                Age
                <button id="btn-age" onClick={this.onSortChange}>
                  &nbsp;
                  <FontAwesomeIcon icon={faSort} />
                </button>
              </span>
            </div>
            <div className="column cluster-ip">
              <span>Cluster IP</span>
            </div>
            <div className="column cpu-usage">
              <span>CPU (cores)</span>
              <button id="btn-cores" onClick={this.onSortChange}>
                &nbsp;
                <FontAwesomeIcon icon={faSort} />
              </button>
            </div>
            <div className="column memory-usage">
              <span>Memory (bytes) </span>
              <button id="btn-memory" onClick={this.onSortChange}>
                &nbsp;
                <FontAwesomeIcon icon={faSort} />
              </button>
            </div>
          </div>
          <div className="table-body">
            {[...runningTasks]
              .sort(sortTypes[currentSort].fn.category)
              .map((task, index) => (
                <div className="table-item row" key={index}>
                  <div className="column age">
                    <span>{task.age} minutes</span>
                  </div>
                  <div className="column cpu-usage">
                    <span className="cpu-usage-chart">
                      <BottomBarChart data={task.cpuUsage} />
                    </span>
                    &nbsp;
                    <p style={{ fontSize: '8px' }}>{task.cpuUsage[0].high}</p>
                  </div>
                  <div className="column memory-usage">
                    <span className="memory-usage-chart">
                      <BottomBarChart data={task.memoryUsage} />
                    </span>
                    <p style={{ fontSize: '8px' }}>
                      &nbsp;
                      {task.memoryUsage[0].high} MiB
                    </p>
                  </div>
                </div>
              ))}
          </div>
        </div>
      )
    );
  }
}

CodeSandbox

Answer 1

改变这一点：

.sort(sortTypes[currentSort].fn.category)

对此：

.sort(sortTypes[currentSort].fn[category])

我没有尝试它，因为您的代码需要一些额外的外部模块，但这显然是一个错误。

编辑:在JSX中使用sort()是不可能的，所以不可能让它使用像“task-one”这样的字符串(排序()按字母顺序排序)，所以我不得不更改为"task-1“。请记住，您并不是真正按名称排序，而是按名称排序组。可能可以使用sort()进行排序，但我不知道如何进行排序。

我建议不要在呈现方法中使用这种逻辑，而是“从上面”提供已经排序/分组的数据。

分类类型：

const sortTypes = {
  Up: {
    fn: {
      age: (a, b) => (a.age > b.age ? -1 : a.age > b.age ? 1 : 0),
      status: ((a, b) => (a.status > b.status) ? 1 : -1),
      name: (a, b) =>{     

        return (a.name < b.name) ? 1 : -1;
      }
    }
  },
  Down: {
    fn: {
      age: (a, b) => (a.age < b.age ? -1 : a.age > b.age ? 1 : 0),
      status: ((a, b) => (a.status < b.status) ? 1 : -1),
      name: (a, b) =>{       

        return (a.name > b.name) ? 1 : -1

      }
    }
  },

};

export default sortTypes;

构成部分：

import React, { Component } from "react";
import "./styles.css";
import sortTypes from "./sortTypes";
import data from "./data";

class BottomPanel extends Component {

  state = {
    currentSort: "Up",
    category: "",

  }; 
  onSortChange = category => {
    debugger;
    const { currentSort } = this.state;
    let direction;
    if(category !== this.state.category){
      direction ='Up'
    }else{
       direction = currentSort === 'Down' ? 'Up': 'Down';    
    }  

    this.setState({
      currentSort: direction,
      category: category
    });
  };

  render() {
    console.log(this.state.category, this.state.currentSort);
    const { currentSort, category } = this.state;

    return (
      data.length >= 0 && (
        <div className="bottom-panel">
          <div className="table-header row">
            <div className="column name">
              <span>Name</span>
              <button id="btn-cores" onClick={()=>{this.onSortChange('name')}}>
                Sort by name
              </button>
            </div>
            <div className="column task-status">
              <span>Status</span>
              <button id="btn-cores" onClick={()=>{this.onSortChange('status')}}>
                Sort by status
              </button>
            </div>
            <div className="column label">
              <span>Label</span>
            </div>
            <div className="column age">
              <span>
                Age
                <button id="btn-age" onClick={()=>{this.onSortChange('age')}}>
                  Sort by age
                </button>
              </span>
            </div>
            <div className="column cluster-ip">
              <span>Cluster IP</span>
            </div>
            <div className="column cpu-usage">
              <span>CPU (cores)</span>
              {/* <button id="btn-cores" onClick={()=>{this.onSortChange('cores')}}>
                Sort by CPU
              </button> */}
            </div>
            <div className="column memory-usage">
              <span>Memory (bytes) </span>
              {/* <button id="btn-memory" onClick={()=>{this.onSortChange('memory')}}>
                Sort by memory
              </button> */}
            </div>
          </div>
          <div className="table-body">
            {[...data]
              .sort(sortTypes[currentSort].fn[category])
              .map((task, index) => (
                <div className="table-item row" key={index}>
                  <div className="column name">
                    <span>{task.name}</span>
                  </div>
                  <div className="column task-status">
                    <span>{task.status}</span>
                  </div>
                  <div className="column label">
                    <span>{task.label}</span>
                  </div>
                  <div className="column age">
                    <span>{task.age} minutes</span>
                  </div>
                  <div className="column cluster-ip">
                    <span>{task.clusterIP}</span>
                  </div>
                  <div className="column cpu-usage">
                    <span className="cpu-usage-chart">
                      {task.cpuUsage[0].high}
                    </span>
                    &nbsp;
                  </div>
                  <div className="column memory-usage">
                    <span className="memory-usage-chart">
                      {task.memoryUsage[0].high}
                    </span>
                  </div>
                </div>
              ))}
          </div>
        </div>
      )
    );
  }
}

export default BottomPanel;

数据：

const data = [
  {
    status: "Not available",
    label: "task-label",
    age: 23,
    name: "task-1",
    clusterIP: "10.148.0.3",
    cpuUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 0.12,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 0.105,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 0.1,
        low: 20
      }
    ],
    memoryUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 100,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 10,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 50,
        low: 20
      }
    ]
  },
  {
    status: "Running",
    label: "task-label",
    age: 27,
    name: "task-2",
    clusterIP: "10.148.0.3",
    cpuUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 0.06,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 0.105,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 0.1,
        low: 20
      }
    ],
    memoryUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 570,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 550,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 540,
        low: 20
      }
    ]
  },
  {
    status: "Running",
    label: "task-label",
    age: 21,
    name: "task-3",
    clusterIP: "10.148.0.3",
    cpuUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 0.04,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 0.09,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 0.13,
        low: 20
      }
    ],
    memoryUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 570,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 400,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 0,
        low: 20
      }
    ]
  },
  {
    status: "Running",
    label: "task-label",
    age: 10,
    name: "task-4",
    clusterIP: "10.148.0.3",
    cpuUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 0.12,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 0.105,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 0.1,
        low: 20
      }
    ],
    memoryUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 0,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 570,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 0,
        low: 20
      }
    ]
  },
  {
    status: "Not available",
    label: "task-label",
    age: 1440,
    name: "task-5",
    clusterIP: "10.148.0.3",
    cpuUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 0.12,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 0.105,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 0.1,
        low: 20
      }
    ],
    memoryUsage: [
      {
        date: "2015-10-1 1:00 PM GMT+1:00",
        high: 570,
        low: 20
      },
      {
        date: "2015-10-1 2:00 PM GMT+1:00",
        high: 100,
        low: 20
      },
      {
        date: "2015-10-1 3:00 PM GMT+1:00",
        high: 400,
        low: 20
      }
    ]
  }
];

export default data;

还有一点:如果您不想使用react，因为它的复杂性，我建议您至少在各种排序/分组过程中使用Lodash。做香草JS是伟大的，如果你想学习，但如果它是紧迫和实用的，洛达什可以节省你很多时间和精力。