Реакция - Как создать цепочечные каскадные вспомогательные функции

Question

Как я могу связать вспомогательные методы в React?

У меня есть файл helper.js с вспомогательными функциями.

т.е.: (ps: ниже приведены только обычные методы для иллюстрациимоя проблема на данный момент)

//helper.js

export function handleLog(arg) {
  return console.log(`App current state is: ${arg}`);
}

export function handleSlice(arr) {
  return arr.slice(1, 2);
}

export function handleShuffle(arr) {
  return arr.sort(() => Math.random() - 0.5);
}

Я могу применить методы к своему приложению React как:

import { handleLog, handleSlice, handleShuffle } from "./helpers";
...

class Heros extends PureComponent {
  constructor() {
    super();
    this.state = {
      heros: ["Hulk", "Thor", "Aquaman", "Stan Lee"]
    };
  }

  render() {
    const { heros } = this.state;
    const shuffledheros = handleShuffle(heros);
    const strongestHero = handleSlice(shuffledheros);
    handleLog(heros);

    /* How could I chain ? */
    // const strongestHero = handleShuffle(heros).handleSlice(heros);

    return (
      <>
        <h1>Chained Helpers</h1>
        Strongest: {strongestHero}
      </>
    );
  }
} 

Как я могу создать цепочку, например: handleShuffle(heros).handleSlice(heros) и так далее?

• При сцеплении второго метода он выдает: (0 , _helpers.handleSlice)(...).handleSlice is not a function

Я безуспешно пытался рефакторинг помощников в:

const helpers = {
 f1() { ...do something...; return this;},
 f2() { ...do something...; return this;}
}
export default helpers

Это тоже не сработало.Вот полный код

Answer 1

Другое решение: создайте методы прототипа Array:

Array.prototype.handleSlice = function() {
    return this.slice(1, 2);
};

Array.prototype.handleShuffle = function() {
    return this.concat().sort(() => Math.random() - 0.5);
};

Таким образом, вы можете выполнять свои методы как каскад.

heros.handleShuffle().handleSlice();

Но я думаю, что Array расширяется для этих простых функцийне лучшая идея.

Answer 2

Вы можете создать собственный класс, который может содержать массив как внутреннее свойство для достижения этого:

class arrayUtils {
  constructor(items = []) {
    this._data = items;
  }
  reverseIt() {
    this._data.sort((a, b) => b - a)
    return this
  }
  getfirstTwo() {
    this._data.splice(0, 2)
    return this
  }
  printIt() {
    console.log('printing:', this._data)
    return this
  }
  get value() {
    return this._data
  }
}

// Create the instance
var arr = new arrayUtils([1, 2, 3, 4, 5])

// Chain subsequent calls (since we return `this`)
console.log('chain:', arr.reverseIt().printIt().getfirstTwo().printIt())

// get the value
console.log('value:', arr.value)

Вы можете видеть это , работающий здесь

Специально для React вы можете иметь это в отдельном классе в отдельном файле утилит и просто export default it:

class helpers ...

export default helpers

затем импортируйте и создайте экземпляр:

import helper from './helper';

// Create the instance
var arr = new helper([1, 2, 3, 4, 5])

Answer 3

Первый: Array.sort не возвращает никакого массива.

Вам следует переписать вашу функцию handleShuffle

export function handleShuffle(arr) {
  return arr.concat().sort(() => Math.random() - 0.5);
}

Второй: вы пытаетесь вызватьфункции массива, но Array не содержит функций handleShuffle или handleSplice.Таким образом, вы должны запустить функцию по функции:

const strongestHero = handleShuffle(handleSlice(heros));

Ваш раздвоенный пример