Question

我正在建立一个基本的待办事项列表以学习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() {
        ...
    }
}

我使用此功能错误吗？还是我想念其他东西？

在此先感谢您的帮助！

Answer 1

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

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

我会尝试将其放在花括号中，而您可能要检查a.completed。我认为主要的问题是它正在将您的(a,b) => (a.completed === b.completed)视为一件真事

排序和更新状态属性数组？ -ReactJS

1 个答案: