Reactjs - повторно отображать данные при нажатии кнопки

Question

Я использую API для получения некоторых данных. Когда страница загружается, она извлекает некоторые случайные данные, но я хочу разрешить пользователю сортировать данные, нажимая кнопку. Я создал функцию для сортировки этих данных из API, который я использую. Сейчас я хочу сделать следующее: при нажатии кнопки сортировки данных я хочу, чтобы новые данные были заменены старыми.

Вот мой текущий код:

class Data extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         data: [],
         offset: 0, perPage: 12 // ignore these two
      };
   }

   // The random data that I want to be displayed on page load
   receivedData() {
      axios
         .get(`https://corona.lmao.ninja/v2/jhucsse`)
         .then(res => {
            const data = res.data;
            
            const slice = data.slice(this.state.offset, this.state.offset + this.state.perPage) // ignore this
            const postData = slice.map(item => 
               <tr key={Math.random()}>
                  <td>{item.province}, {item.country}</td>
                  <td>{item.stats.confirmed}</td>
                  <td>{item.stats.deaths}</td>
                  <td>{item.stats.recovered}</td>
               </tr>
            )

            this.setState({
               pageCount: Math.ceil(data.length / this.state.perPage), // ignore this
               
               postData
            })
         });
   }

   // The data to be sorted when the "country" on the table head is clicked
   sortData() {
      axios
         .get(`https://corona.lmao.ninja/v2/jhucsse`)
         .then(res => {
            const data = res.data;

            var someArray = data;
            function generateSortFn(prop, reverse) {
               return function (a, b) {
                  if (a[prop] < b[prop]) 
                     return reverse ? 1 : -1;
                  if (a[prop] > b[prop]) 
                     return reverse ? -1 : 1;
                  return 0;
               };
            }
            // someArray.sort(generateSortFn('province', true))

            const tableHead = <tr>
               <th onClick={() => someArray.sort(generateSortFn('province', true))}>Country</th>
               <th>Confirmed Cases</th>
               <th>Deaths</th>
               <th>Recovered</th>
            </tr>

            this.setState({
               tableHead
            })
         });
   }

   componentDidMount() {
      this.receivedData()
      this.sortData() // This function should be called on the "Country - table head" click
   }

   render() {
      return (
         <div>
            <table>
               <tbody>
                  {this.state.tableHead}

                  {this.state.postData}
               </tbody>
            </table>
         </div>
      )
   }
}

export default Data;

Answer 1

Подумайте немного иначе. В componentDidMount вы получаете данные в некоторой форме. Установите его с помощью setState только необработанных данных, а не html. Затем используйте данные по нажатию кнопки. React rerenders, если состояние меняется автоматически

class Data extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     data
   }
 }

 getData() {
  fetchData('url').then(res) {
   this.setState({data: res.data})
  }
 }

 componentDidMount() {
  this.getData()
 }

 sort() {
  let newSorted = this.state.data.sort //do the sorting here
  this.setState({data: newSorted})
 }

 render() {
  return() {
   <table>
    <tablehead><button onClick={this.sort.bind(this)}/></tablehead>
    {this.state.data.map(data => {
     return <tablecell>{data.name}</tablecell>
    })}
   </table>
  }
 }
}