Question

我试图重新订购州内的一系列地点，但没有成功。该应用程序允许您添加具有名称，地址，坐标等属性的位置...我的意思是按名称按字母顺序重新排序位置数组。这些是组件中的重要部分：

 class Locations extends Component {
    state = {
        name: '',
        address: '',
        locations: [],
        count: 0
    };

    sortByName = () => {
const locationsSortByName = this.state.locations.sort()
        this.setState({
            locations: locationsSortByName
        })
    };

    render() {
        return (
            <div className="locations">
                <button onClick={this.sortByName}>Sort by Name</button>
            </div >
        );
    }
}

这是一系列位置的样子：

locations: [
    {id: 1, name: "macdonald", address: "long street", isToggled: false},

    {id: 2, name: "KFC", address: "somewhere", isToggled: false},

    {id: 3, name: "Burgerbar", address: "city", isToggled: false}]

用户提供的每个新位置都会获得唯一ID。我得到的错误是：

未捕获错误：抛出了跨源错误。 React没有访问开发中的实际错误对象。看到 .....欲了解更多信息。

Answer 1

您没有以适当的方式对数组进行排序。你需要对element.name进行排序。将排序行更改为

const copyLocations= [...this.state.locations]
const locationsSortByName = copyLocations.sort((a, b) => {
   return a.name.toLowerCase() > b.name.toLowerCase()
})

希望这有帮助。

Answer 2

您需要根据对象内的属性对其进行排序。

这将使您的数组按名称按字母顺序排序。

const sortByName = this.state.locations.sort( (a,b) => {
  if(a.name < b.name) return -1;
  if(a.name > b.name) return 1;
  return 0;
})

在状态|中排序数组应对

2 个答案: