Reactjs 数组（状态）中添加的todo对象不会立即反转

我正在用React redux在前端创建Todo CRUD应用程序。当我将一个新的todo对象添加到状态中的todo数组列表时，我希望新的todo在最顶端呈现，而不是最后一个。我只是将组件连接到redux statetodo列表并将其反转。它起作用了，虽然不是即时的，但需要一段时间。我想问题出在生命周期中。索引组件已连接到redux状态。渲染生命周期创建标记，映射到状态数组，然后Componentdidmount触发，从而更新状态，然后发生重新渲染，从而更新视图。这不是立即发生的，而是几毫秒后。但我不确定，也很困惑，因为我尝试了另一种生命周期方法，但没有结果

TODO组件列表

Index.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { todoList } from '../actions/todoActions';
import TableRow from './TableRow';

class Index extends Component {

    componentDidMount() {
        this.props.todoList();
    };

    tabRow() {
        return this.props.allTodos.map(user => {
            return <TableRow obj={user} key={user._id} />
        });
    }

    render() {
      return (
        <div>
          <h3 align="center">Todo List</h3>
          <table className="table table-striped" style={{ marginTop: 20 }}>
            <thead>
              <tr>
                <th>Name</th>
                <th>Surname</th>
                <th>Task</th>
                <th colSpan="2">Action</th>
              </tr>
            </thead>
            <tbody>
              { this.tabRow() }
            </tbody>
          </table>
        </div>
      )
    }
};

const mapStateToProps = state => ({
    allTodos: state.todo.todos.reverse()
});

export default connect(
    mapStateToProps,
    { todoList }
)(Index);

还原剂

const initialState = {
    todos: []
};

export default function(state = initialState, action) {
    switch(action.type) {
        case ADD_TODO:
            return {
                ...state,
                todos: [...state.todos, action.payload]
            };
        case GET_TODOS:
            return {
                ...state,
                todos: [...action.payload]
            };
        default:
            return state;
    }
}

---

老实说，我没有完全理解这个问题。但从我收集的信息来看，你希望新的待办事项放在其他待办事项的前面。 这可以通过切换ADD_TODO减速器中的位置来实现

case ADD_TODO:
    return {
        ...state,
        todos: [action.payload, ...state.todos]
    };

编辑：

---

获取TODO的api调用可能不会执行相同的操作，而只是将其追加到末尾。那样的话，如果可以的话，你应该在那里处理。或者，在从api获取数据后，您应该立即自己执行此操作。由于这是在componentDidMount中完成的，因此在第一次渲染后会有一个延迟。添加微调器是解决这一问题的一种方法

对。我希望新的todo放在其他todo的前面，但当我添加新的todo时，它不会立即发生。起初，视图显示新todo位于列表的末尾，但几毫秒后，它将新todo置于列表的最顶端。我想知道是什么原因导致了这个轻微的延迟，以及如何解决这个问题。我不明白它是如何将新的todo放在最上面的，我猜它是在api调用中处理的？无论如何，试试上面的解决方案，它应该可以做到。在MapStateTrops中，索引组件中的反向方法为什么要反转整个数组？你能去掉反面并尝试上面的解决方案吗？你能将代码添加到codesandbox或其他地方并在这里发布链接吗？这样会更容易检查。

export const registerTodo = (userTodo, history) => dispatch => {
    axios
        .post('/api/users/add', userTodo)
        .then(res => {
            dispatch(setTodo(userTodo));
            history.push('/index');
        })
        .catch(err => console.log(err));
};

export const setTodo = todo => {
    return {
        type: ADD_TODO,
        payload: todo
    };
};

export const todoList = () => dispatch => {
    axios
        .get('/api/users')
        .then(res => {
            dispatch(getTodos(res.data));
        });
};

export const getTodos = todos => {
    return {
        type: GET_TODOS,
        payload: todos
    }
};

const initialState = {
    todos: []
};

export default function(state = initialState, action) {
    switch(action.type) {
        case ADD_TODO:
            return {
                ...state,
                todos: [...state.todos, action.payload]
            };
        case GET_TODOS:
            return {
                ...state,
                todos: [...action.payload]
            };
        default:
            return state;
    }
}

case ADD_TODO:
    return {
        ...state,
        todos: [action.payload, ...state.todos]
    };