Javascript 在React.js中按字母顺序(升序/降序)排序ul列表项时遇到问题

Javascript 在React.js中按字母顺序(升序/降序)排序ul列表项时遇到问题,javascript,reactjs,Javascript,Reactjs,我是全新的反应,所以这可能是一个非常愚蠢的问题,但我真的需要一些帮助!我看了所有的地方,不明白为什么sortList函数什么都不做。以下是我的组件代码的开头: class App extends React.Component { constructor(props) { super(props); this.state = { items: [ { id: 1

我是全新的反应,所以这可能是一个非常愚蠢的问题,但我真的需要一些帮助!我看了所有的地方,不明白为什么sortList函数什么都不做。以下是我的组件代码的开头:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [
                {
                    id: 1,
                    text: 'bananas',
                    done: false
                },
                {
                    id: 2,
                    text: 'milk',
                    done: false
                },
                {
                    id: 3,
                    text: 'bread',
                    done: false
                },
                {
                    id: 4,
                    text: 'cheese',
                    done: false
                }
            ],
            text: "",
            ascending: true
        };
        this.handleNewText = this.handleNewText.bind(this);
        this.addItem = this.addItem.bind(this);
        this.handleCheckOff = this.handleCheckOff.bind(this);
        this.handleDeleteItem = this.handleDeleteItem.bind(this);
        this.sortList = this.sortList.bind(this);
    }
而这个功能不起作用

    sortList() {
        let newList = this.state.items.sort((a,b) => {
            if (this.state.ascending) {
                return a.text - b.text;
            } else {
                return b.text - a.text;
            }
        });
        this.setState({
            ascending: !this.state.ascending,
            items: newList
        });
    }
和渲染功能

    render() {
        return (
            <div className="col-lg-6">
                <form>
                    <input type="text" id="textBox" className="form-control" onChange={this.handleNewText} value={this.state.text} />
                    <button id="addButton" className="btn btn-primary" onClick={this.addItem} disabled={!this.state.text}>{"Add Item"}</button>
                </form>
                <div id="postIt">
                    <h1>Shopping List</h1>
                    <List items={this.state.items} onItemCheckedOff={this.handleCheckOff} onDeleteItem={this.handleDeleteItem} />
                    <button id="sortButton" className="btn btn-primary" onClick={this.sortList}>{"Sort"}</button>
                </div>
            </div>
        );
    }   
}
render(){
返回(
{“添加项”}
购物清单
{“排序”}
);
}   
}

除了SortList功能外,其他功能都运行良好。我尝试了许多不同的方法,但都没能成功。发生的最多的是列表项消失了

您可以尝试从每个字符串中减去2个字符串,返回Nan。排序需要1或-1

let newList = this.state.items.sort((a, b) => {
    if (this.state.ascending && a.text > b.text) {
        return 1;
    } else {
        return -1;
    }
});

希望回答你的问题

这个.setState({…})是什么意思做什么?这是你自己的职责吗?您的
sortList
函数是否被调用?感谢您的回复!我希望它能生成初始项[]数组的新排序newList。但很明显,它不起作用!sortList由底部的“sortButton”调用。“添加按钮”工作得很好。。。