как сортировать данные, которые рассчитываются из данных из нескольких массивов

Question

В моем приложении React я хочу отсортировать данные в алфавитном порядке и на основе общей оценки от высокой до низкой.
При визуализации компонента общая оценка рассчитывается на основе данных из 2 файлов JSON.
Iдобавлена ​​сортировка по алфавиту.
Для простоты в примере ниже я оставил сортировку только для одного профиля.

Вопросы:

1. Я не могу понять, как мне делать сортировку результатов, которые рассчитываются на основе данных из нескольких массивов
2. Как отменить пользовательскую сортировку и вернуть сортировку по умолчанию из файла json

// my files.json
let profiles = {"name": "Will", "skillset" : {"a": 3, "b": 2}}

let disciplines = [
{"name": "Diving", "requirements" : {"a": 2, "b": 5}},
{"name": "Tennis", "requirements" : {"a": 3, "b": 1}},
{"name": "BMX", "requirements" : {"a": 4, "b": 2}},
]

const disciplineScore = (profileSkillset, disciplineRequirements) => {
  let score = 20
  for (let skill of Object.keys(profileSkillset))
    score = score + (profileSkillset[skill] + disciplineRequirements[skill])
  return score
}

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: this.props.disciplines }
    this.sortBy = this.sortBy.bind(this)
  }
  
  compareBy(key) {
    return function (a, b) {
      if (a[key] < b[key]) return -1
      if (a[key] > b[key]) return 1
      return 0
    }
  }
  
  sortBy(key) {
    let arrayCopy = [...this.state.data]
    arrayCopy.sort(this.compareBy(key))
    this.setState({ data: arrayCopy })
  }
  
  render() {
    let { data } = this.state
    const disciplineList = data.map((discipline) => {
      return (
        <div key={discipline.name}>
          <span className='name' >{discipline.name}</span> - <span className='score'>
          {disciplineScore(this.props.profiles.skillset, discipline.requirements)}
          </span>
        </div>
      )
    })
    return (
      <section>
        <div className='sort-wrap'>
          <button onClick={() => this.sortBy('name')}>Sort A to Z</button>
           <button onClick={() => this.sortBy()}>Sort high to low</button>
        </div>
        <div className='content'>
          { disciplineList }
        </div>
      </section>
    )
  }
}

const App = () => (
  <div><Main profiles={profiles} disciplines={disciplines} /></div>
)

ReactDOM.render(
  <App />,
  document.getElementById('root')
 )

button {
  margin: 10px;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 1

Ваше состояние должно быть: this.state = { data: this.props.disciplines, sort: sort }

Сортировка может быть ключом, функцией, независимо от того, что вы предпочитаете.
Дело в том, что мы можем изменить this.state.data и this.state.sort независимо, и мыникогда не пересортируйте при изменении значения.
Мы сортируем при рендеринге.
Или не сортируем, чтобы получить исходный порядок.