如何在 React 组件中对 Rails 数据库对象进行排序答案

【问题标题】：How to Sort Rails Database Object in React Component如何在 React 组件中对 Rails 数据库对象进行排序
【发布时间】：2017-08-28 13:47:28
【问题描述】：

我的 Rails 数据库中有 React 正在为组件访问的对象。 React 将这些对象的两个属性显示为列表。我想根据未显示但可通过 Rails 数据库用于 React 的属性之一对该列表进行排序。该属性是“updated_at”值。理想情况下，我希望最近更新的对象显示在列表顶部。

数据可通过此调用提供给 React：

document.addEventListener('DOMContentLoaded', () => { 
  const node = document.getElementById('projects_data') 
  const data = JSON.parse(node.getAttribute('data')) 
  ReactDOM.render( 
    <Projects projects={data} />, 
    destination) 
  })

这就是我现在尝试对列表进行排序但没有成功的方式。没有错误，但它不起作用。目标是每次将名为 Project 的新对象添加到数据库时重新排序列表。

addNewProject(project){ 
    const projects = update(this.state.projects, { $push: [project]}); 
    this.setState({ 
        projects: projects.sort(function(a,b){ 
            return new Date(a['updated_at']) - new Date(b['updated_at']); 
        }) 
    }); 
}

这是列表组件：

export const Project_list = ({projects}) =>  
    <table className="table">                   
      <tbody> 
        <tr> 
          <th>Project Name</th> 
          <th>Project Status</th> 
          <th>Action</th> 
        </tr> 
        {projects.map(function(project){         
           return (                         
             <Project project={project} key={project.id} />        
                  ) 
        })} 
      </tbody> 
    </table>

【问题讨论】：

我可以向您介绍一个用于排序、搜索等功能的表的出色库...。allenfang.github.io/react-bootstrap-table我不知道您将来想做什么，但我想我可以救您从重新定义轮子:)
您确定要为新添加的项目返回updated_at ？
@OzgurGUL 我已将对象信息添加到上述问题中，但“updated_at”确实出现在每个对象的对象 div 中。
@Nocebo 谢谢。我去看看那个图书馆。

标签： javascript ruby-on-rails reactjs sorting

【解决方案1】：

我通过两种不同的修复方法解决了这个问题。

我在仪表板控制器中添加了一个“订单”：

@projects = @current_user.projects.order("updated_at DESC")

我更改了“return new Date(a['updated_at']) - new Date(b['updated_at']);” 到

return new Date(b['updated_at']) - new Date(a['updated_at']);

【讨论】：