反应：反向函数在映射数组时不起作用

Question

我正在处理显示来自 API 的数据的页面。实际上，我试图以相反的顺序显示数组数据，但它不以相反的顺序显示数据。当我刷新页面时，第一次数据反向显示，但 3 秒后数据恢复并以原始形式显示。请帮助我谢谢

代码

import React, { Component } from "react";
import DayPicker from "react-day-picker";
import "react-day-picker/lib/style.css";
import "./style.css";
import axios from "axios";

class DiarySideBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentWillMount() {
    axios.get("/api/diary/all").then(res => {
      this.setState({
        data: res.data.rows
      });
    });
  }
  render() {
    const { data } = this.state;
    return (
      <div>
        <div className="calendarWrapper">
          <DayPicker />
        </div>
        <div className="activeTaskMainWrapper">
          <h6 className="activeTaskHeaderWrapper">Active Tasks</h6>
          {data
            .reverse()
            .slice(0, 5)
            .map(newData => (
              <div className="activeTaskText">
                <b>{newData.taskType}</b>
                <p>{newData.subject}</p>
                <hr />
              </div>
            ))}
        </div>
      </div>
    );
  }
}

export default DiarySideBar;

Answer 1

该reverse函数会改变原始数组 - 这是您的状态变量，可能会导致意外结果。请在反转之前使用数组展开运算符 [...data].reverse()或切片调用克隆数组data.slice().reverse()。