Как переделать эти две строки, чтобы сортировка по c и des c была реализована только по реакции (без loda sh)? - PullRequest
Новая
       7

Как переделать эти две строки, чтобы сортировка по c и des c была реализована только по реакции (без loda sh)?

0 голосов
/ 22 апреля 2020

Есть одно очень простое приложение, которое отображает таблицу списка. И есть сортировка по как c и des c, когда вы щелкаете по названию и отображаете возле слова заголовка как c и де c. Если вы хотите, вы можете увидеть, как это работает, и весь код в песочнице: https://codesandbox.io/s/mystifying-raman-btwxc

Но две строки, отвечающие за сортировку по как c и des c написаны с библиотекой Loda sh. Но мне не нужна Loda sh в моем приложении.

В методе onSort и componentDidMount Я комментирую две строки, в которых используется Loda sh: 

class App extends React.Component {
  state = {
    isLoading: true,
    data: [],
    sort: "asc",
    sortField: "id"
  };

  onSort = sortField => {
    const clonedData = this.state.data.concat();
    const sortType = this.state.sort === "asc" ? "desc" : "asc";
    const orderedData = _.orderBy(clonedData, sortField, sortType);    //used Lodash

    this.setState({
      data: orderedData,
      sort: sortType,
      sortField: sortField
    });
  };

  async componentDidMount() {
    const response = await fetch("/data/today.json");
    const data = await response.json();

    this.setState({
      isLoading: false,
      data: _.orderBy(data, this.state.sortField, this.state.sort)     //used Lodash
    });
  }

  render() {
    return (
      <div className="conatainer">
        {this.state.isLoading ? (
          <Loader />
        ) : (
          <Table
            data={this.state.data}
            onSort={this.onSort}
            sort={this.state.sort}
            sortField={this.state.sortField}
          />
        )}
      </div>
    );
  }
}

Как переделать эти две строки, что сортировка по как c и des c были реализованы только по реакции (без loda sh)?

Ответы [ 2 ]

0 голосов
/ 22 апреля 2020

Вот решение в одну строку: 

const sortBy = (k, d = 1) => (a, b) => (a[k] > b[k] ? 1 * d : b[k] > a[k] ? -1 * d : 0);

А вот как его использовать: 

const fruits = [
    { name: "banana", amount: 20 },
    { name: "apple", amount: 41 },
    { name: "kiwi", amount: 21 },
    { name: "dragonfruit", amount: 13 },
];

const sortBy = (k, d = 1) => (a, b) => (a[k] > b[k] ? 1 * d : b[k] > a[k] ? -1 * d : 0);

console.log(JSON.stringify([...fruits]));
console.log(JSON.stringify([...fruits].sort(sortBy("name"))));
console.log(JSON.stringify([...fruits].sort(sortBy("name", -1))));

И вот форк вашего CodeSandbox с работающей реализацией.

Надеюсь, это поможет.

Cheers ! 101

0 голосов
/ 22 апреля 2020

Loda sh - небольшая и удивительная библиотека, которая предоставляет гораздо больше, чем просто сортировку. Но в любом случае ...

React - это не что иное, как JavaScript, и у него есть возможность сортировки. Вам нужно сравнить встроенную функцию sort. Ниже приведен метод сортировки, написанный на JavaScript (ES6). 

function sort(collection, field, direction) {
  collection.sort((a, b) => {
    if(field) {
      a = a[field];
      b = b[field];
    }
    if(direction === 'asc') return (a[field] > b[field]) ? 1 : -1;
    else return (a < b) ? 1 : -1;
  });
  return collection;
}

Использование из вашего фрагмента кода.

this.sort(clonedData, sortField, sortType);

Надеюсь, это поможет.

...