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

我正在工作的页面上，我正在显示来自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;

import React，{Component}来自“React”；
从“反应日选择器”导入日选择器；
导入“react day picker/lib/style.css”；
导入“/style.css”；
从“axios”导入axios；
类日记边栏扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
};
}
组件willmount（）{
get（“/api/diary/all”）。然后（res=>{
这是我的国家({
数据：res.data.rows
});
});
}
render（）{
const{data}=this.state；
返回(
活动任务
{数据
.reverse（）
.切片（0,5）
.map（newData=>(
{newData.taskType}
{newData.subject}


))}
);
}
}
导出默认日记边栏；

请使用

componentDidMount

而不是

componentWillMount

尝试在

componentDidMount

或单独的函数中反转逻辑，而不是

render

函数

---

这样它就不会按照您的要求重新渲染并返回原始顺序。

请使用

componentDidMount

而不是

componentWillMount

尝试在

componentDidMount

或单独的函数中反转逻辑，而不是

render

函数

这样，它就不会按照您的要求重新渲染并返回原始顺序。

该函数会对原始数组进行变异，而原始数组是您的状态变量，可能会导致意外的结果。 请在反转之前使用

[…data].reverse（）

或调用

data.slice（）.reverse（）

该函数会改变原始数组-这是您的状态变量，可能会导致意外结果。

---

---

请使用

[…data].reverse（）

或调用

data.slice（）.reverse（）

在反转之前克隆阵列，这三秒钟后你在做什么？Ie是什么导致重新渲染？我的意思是，在几秒钟后数组以原始形式渲染，我想以相反的顺序渲染数组首先使用

componentDidMount

而不是

componentWillMount

，然后如果在

componentDidMount

中执行反转逻辑，或者使用单独的函数而不是

渲染

功能。这样它就不会重新渲染并返回原始顺序。请回答问题，我想投票表决您的问题这是您在组件中更改的唯一内容吗？您的组件中是否已经安装了

componentDidMount

？三秒钟后您在做什么？Ie是什么导致重新渲染？我的意思是，在几秒钟后数组以原始形式渲染，我想以相反的顺序渲染数组首先使用

componentDidMount

而不是

componentWillMount

，然后如果在

componentDidMount

中执行反转逻辑，或者使用单独的函数而不是

渲染

功能。这样它就不会重新渲染并返回原始顺序。请回答问题，我想投票表决您的问题这是您在组件中更改的唯一内容吗？组件中是否已经有

componentDidMount

？

reverse

在渲染中不应触发重新渲染。我遗漏了什么吗？重点是将逻辑放在

componentDidMount

中，这样反转逻辑只在组件装载时运行，而不是每次重新渲染时运行。是的，

componentDidMount

是建议的方法，但这也适用于

componentWillMount

。这不可能是问题所在。一定是别的什么原因导致了重播。使用

componentDidMount

而不是

componentWillMount

无法解决此问题。我不确定确切的问题可能是某个父组件导致重新渲染，这就是为什么我建议将反向逻辑移出渲染方法，该方法显然适用于OP。如果出现了变异问题，我想他永远也不会得到正确的结果。我明白你的意思，将

反向

移出渲染解决了问题，但它也隐藏了“真正的”重新渲染问题。有点可疑：）

reverse

在渲染中不应触发重新渲染。我遗漏了什么吗？重点是将逻辑放在

componentDidMount

中，这样反转逻辑只在组件装载时运行，而不是每次重新渲染时运行。是的，

componentDidMount

是建议的方法，但这也适用于

componentWillMount

。这不可能是问题所在。一定是别的什么原因导致了重播。使用

componentDidMount

而不是

componentWillMount

无法解决此问题。我不确定确切的问题可能是某个父组件导致重新渲染，这就是为什么我建议将反向逻辑移出渲染方法，该方法显然适用于OP。如果出现了变异问题，我想他永远也不会得到正确的结果。我明白你的意思，将

反向

移出渲染解决了问题，但它也隐藏了“真正的”重新渲染问题。这里有些可疑：）原因如下。我错过了

reverse

方法的“就地”更改。抢手货这是实际的问题，这是正确的答案。虽然，作为第二个想法，变异状态是一个问题，但我想这不会导致重播。不过，我不确定OP的真正问题是什么。应该假设

render

函数可以是cal