Сортировка и обновление массива свойств состояния?- ReactJS

Question

Я создаю базовый список дел для изучения reactJS и хотел бы поставить отмеченные элементы внизу списка.

Я пытался использовать метод JavaScript .sortв конце списка перед вызовом setState, но он не выглядит согласованным.Я также пытался сделать это отдельно с const x = Object.assign({},this.state), но это дает тот же результат.

class App extends Component{
    constructor(){
        super();
        this.state = {
            todos: todosData
        }

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(id){
        this.setState(prevState => {
            const updatedTodos = prevState.todos.map(todo => {
                if(todo.id === id) {
                    todo.completed = !todo.completed;
                }
                return todo;
            }).sort((a,b) => (a.completed === b.completed)? 0 : a? -1 : 1)
            return{
                todos: updatedTodos
            }
        })
    }

    render() {
        ...
    }
}

Я неправильно использую эту функцию?Или, может быть, я что-то упускаю?

Заранее благодарю за любую помощь!

Answer 1

Ну, моя критика состояла бы в том, что вы делаете слишком много встроенных вещей. map дает вам новый массив, так что я предполагаю, что это нормально (setState подтвердит изменение, если обертка - это другая ссылка), но порядок операций в вашей последней строке, вероятно, вызывает проблемы.

.sort((a,b) => (a.completed === b.completed)? 0 : a? -1 : 1)

Я бы попытался поместить это в блоки фигурных скобок, и вы можете проверить a.completed. Я думаю, что главная проблема в том, что он оценивает вашу (a,b) => (a.completed === b.completed) как правдивую вещь