React：根据日期顺序渲染答案

【问题标题】：React: Rendering based on date orderReact：根据日期顺序渲染
【发布时间】：2019-12-06 04:33:29
【问题描述】：

我有一个表单，它可以渲染组件并将其插入时间轴，但我不知道如何让它按时间顺序渲染新提交，以便以正确的顺序插入。

这是我迄今为止一直在尝试的。

render() {
  return (
    <div className="timeline-container">
      <ul>
        {this.state.activities
          .sort((a, b) => a.date > b.date)
          .map((activity, i) => (
            <Activity
              key={i}
              data={activity}
              handleDelete={this.handleDelete}
            />
          ))}
      </ul>
    </div>
  );
}

这是 Activity 组件：

<li>
  <span></span>
  <div className="activity-title">{this.state.activity.title}</div>
  <div className="activity-info">{this.state.activity.description}</div>
  <div className="activity-location">{this.state.activity.location}</div>
  <div className="activity-date">{this.state.activity.date.slice(0, 10)}</div>
  <button onClick={this.handleDelete.bind(this, this.state.activity.id)}>
    Delete
  </button>
</li>;

目前它仍然在提交表单时自动呈现，但它没有对它们进行排序。

【问题讨论】：

您能否向我们展示this.state.activities 的内容，以便进一步帮助您解决这个问题？数据在这里非常重要。您可以使用以下命令进入控制台，数据：console.log(JSON.stringify(this.state.activities)) 并将其添加到您的问题中。
日志为：[{"id":27,"trip_id":5,"title":"Activity 1","description":"Description 1","location":"Location 1","日期":"2019-07-03T23:00:00.000Z","待定":null,"created_at":"2019-07-28T17:49:40.269Z","updated_at":"2019- 07-28T17:49:40.269Z"}] 如果我控制台记录状态，我会得到一个包含我需要的所有信息的数组，我只是无法对其进行排序。谢谢
您只有一项活动。你想怎么排序？只有在有很多活动的情况下才能进行排序，对吧？
哦，抱歉，我以为您只是想查看键值。数组中实际上大约有 15 个活动： {"id":31,"trip_id":5,"title":"Activity 5","description":"Description 5","location":"Location 5", "日期":"2019-07-02T23:00:00.000Z","待定":null,"created_at":"2019-07-28T17:58:51.144Z","updated_at":"2019-07-28T17 :58:51.144Z"},{"id":32,"trip_id":5,"title":"Activity 6","description":"Description 6","location":"Location 6","date ":"2019-06-30T23:00:00.000Z","待定":null,"created_at":"2019-07-28T17:58:58.912Z","updated_at":"2019-07-28T17:58 :58.912Z"}]
别担心，我设法解决了。问题出在日期排序方法中。我已经把它修好了，并给了你正确的方法来解决它。看看我的回答，看看是否有帮助。

标签： reactjs rendering react-on-rails

【解决方案1】：

嘿，您的日期存储为字符串，因此在比较器函数中，您应该像 -1、1、0 那样返回布尔值，而不是返回布尔值

// where a and b are strings.
function camp(a, b){
    If (a>b) {
       return 1
}
if ( a<b){
     return -1
}

// in case of equal 
return 0

}

【讨论】：

如果您像我在my answer 中所做的那样包括需要进行比较的位置会更好。

【解决方案2】：

您应该使用new Date(date).getTime() 方法进行比较和排序。最好的方法是：

.sort(
  (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
)

通过我的虚拟数据，我得到了这个：

我添加了更多条目，这是完整的代码：

const Activity = props => (
  <li>
    {props.data.title} (#{props.data.id}) ({props.data.date.split("T")[0]})
  </li>
);

class App extends React.Component {
  state = {
    activities: [
      {
        id: 1,
        trip_id: 5,
        title: "Activity 1",
        description: "Description 1",
        location: "Location 1",
        date: "2019-07-03T23:00:00.000Z",
        pending: null,
        created_at: "2019-07-28T17:49:40.269Z",
        updated_at: "2019-07-28T17:49:40.269Z"
      },
      {
        id: 2,
        trip_id: 5,
        title: "Activity 2",
        description: "Description 1",
        location: "Location 1",
        date: "2019-07-05T23:00:00.000Z",
        pending: null,
        created_at: "2019-07-28T17:49:40.269Z",
        updated_at: "2019-07-28T17:49:40.269Z"
      },
      {
        id: 3,
        trip_id: 5,
        title: "Activity 3",
        description: "Description 1",
        location: "Location 1",
        date: "2019-07-02T23:00:00.000Z",
        pending: null,
        created_at: "2019-07-28T17:49:40.269Z",
        updated_at: "2019-07-28T17:49:40.269Z"
      }
    ]
  };
  render() {
    return (
      <div className="timeline-container">
        <ul>
          {this.state.activities
            .sort(
              (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
            )
            .map((activity, i) => (
              <Activity
                key={i}
                data={activity}
                handleDelete={this.handleDelete}
              />
            ))}
        </ul>
      </div>
    );
  }
}

在此示例中，我使用了多个活动来向您展示它们是如何按日期排序的。

演示：CodeSandbox

【讨论】：