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。然后在单击按钮时重新使用数据。如果状态自动更改，请做出反应

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>
  }
 }
}

Reactjs-单击按钮重新呈现数据

1 个答案: