反应按值排序答案

【问题标题】：React sort by value反应按值排序
【发布时间】：2021-03-06 09:10:21
【问题描述】：

我收到了一个需要添加功能的 shell 代码。我是这个 shell 中嵌入的 HTML、CSS、React 等的初学者。我有一个 json 文件，其中包含我的票证，其中包括 id、创建时间、标题等。我希望添加一个按钮来按值排序票证，例如创建时间。我已经尝试过许多我见过的格式，但到目前为止都没有，这是代码的当前状态返回：“TypeError：无法读取未定义的属性'sortByDate'”关于toggleSortDate（已删除我认为无关紧要的部分）：

import React from 'react';
import './App.scss';
import {createApiClient, Ticket} from './api';

export type AppState = {
    tickets?: Ticket[],
    search: string;
}

export class App extends React.PureComponent<{}, AppState> {

    state: AppState = {
        search: ''
    }

    sortByDate () {
        const {tickets} = this.state;
        let ordTickets = tickets
        ordTickets = tickets.sort((a, b) => a.creationTime < b.creationTime)
        this.setState({
            tickets: ordTickets
        })
    }

    toggleSortDate (event) {
    this.sortByDate()
    }

    renderTickets = (tickets: Ticket[]) => {

        const filteredTickets = tickets
            .filter((t) => (t.title.toLowerCase() + t.content.toLowerCase()).includes(this.state.search.toLowerCase()));
        return (<ul className='tickets'>
            {filteredTickets.map((ticket) => (<li key={ticket.title} className='ticket'>
                <h5 className='title'>{ticket.title}</h5>
                <button onClick={this.rename}>Rename</button>
                <h6 className='meta-data'> {ticket.content}</h6>
                <footer>
                    <div className='meta-data'>By {ticket.userEmail} | { new Date(ticket.creationTime).toLocaleString()}</div>
                </footer>
            </li>))}
        </ul>);
    }


    render() {
        const {tickets} = this.state;
        return (<main>
            <button onClick={this.darkMode}>Dark mode</button>
            <h1>Tickets List</h1>
            <header>
                <input type="search" placeholder="Search..." onChange={(e) => this.onSearch(e.target.value)}/>
            </header>
            <button onClick={this.toggleSortDate}>Sort by date</button>
            <button onClick={()=>this.onSort('date')}>Sort By Title</button>
            <button onClick={()=>this.onSort('date')}>Sort By Email</button>
            {tickets ? <div className='results'>Showing {tickets.length} results</div> : null }
            {tickets ? this.renderTickets(tickets) : <h2>Loading..</h2>}

        </main>)
    }
}
export default App;
    /*    <button onclick={this.sort(creationTime)}>Sort by date</button>*/

我非常感谢一些帮助:)

编辑

非常感谢您的帮助，我已经按照#k-wasilewski 的建议添加了构造函数，并且我将排序更新为此并且它可以工作：

sortByDate () {
        const {tickets} = this.state
        const arr = [...tickets].sort((a, b) => (a.creationTime < b.creationTime)? 1:-1)
console.log(tickets)
        this.setState({
            tickets : arr
        })
    console.log(arr);
    }
    SortDate (event) {
    this.sortByDate()
    }

【问题讨论】：

你正在使用的类组件的原因我认为你需要使用bind this.toggleSortDate.bind(this)或者将它包裹在一个函数{()=>this.toggleSortDate()}

标签： reactjs sorting button

【解决方案1】：

要使全局this 可识别，必须在构造函数中绑定您的函数：

constructor() {
    super();

    this.toggleSortDate = this.toggleSortDate.bind(this);
}

或者只使用箭头函数，默认绑定：

const toggleSortDate = (event) => {
    // ...
}

【讨论】：

【解决方案2】：

您错过了将处理程序函数绑定到组件实例，因此this.sortByDate() 中的this 是undefined，如错误消息所述。

在类组件的第一行，添加以下内容：

  constructor( props ){
    super( props );
    this.toggleSort = this.toggleSort.bind(this);
  }

这样做是为了让您的处理程序函数可以访问组件属性。因此，如果您需要在处理函数中访问this.props 或this.state，则也需要此绑定。

参考：https://reactjs.org/docs/faq-functions.html#how-do-i-bind-a-function-to-a-component-instance

【讨论】：