排序和更新状态属性数组？ - 反应JS答案

【问题标题】：Sorting and updating a state property array? - ReactJS排序和更新状态属性数组？ - 反应JS
【发布时间】：2019-05-13 03:13:44
【问题描述】：

我正在构建一个基本的待办事项列表来学习reactJS，并希望将选中的项目放在列表底部。

在调用 setState 之前，我曾尝试在列表末尾使用 JavaScript 的 .sort 方法，但它似乎不一致。我也尝试过使用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() {
        ...
    }
}

我是不是用错了这个功能？或者也许我错过了其他东西？

提前感谢您的帮助！

【问题讨论】：

不会a? -1 : 1 总是返回-1？
@ray hatfield，如果 a === false 和 b === true 它应该返回 1 不是吗？
但是a 和b 是待办事项对象，而不是true/false。对象在 js 中是真实的。因此，除非 a 为 null（或未定义或 0），否则您的表达式将始终返回 -1。也许你的意思是a.completed ? -1 : 1？
你完全正确！感谢您指出这一点！

标签： javascript arrays reactjs sorting

【解决方案1】：

好吧，我的批评是你内联做了太多的事情。 map 确实为您提供了一个新数组，所以我假设这很好（如果包装器是不同的引用，setState 会承认更改），但您最后一行的操作顺序可能是导致问题的原因。

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

我会尝试将它放在花括号中，您可能需要检查a.completed。我认为主要问题是它正在评估您的 (a,b) => (a.completed === b.completed) 是否真实

【讨论】：