数据排序方法在javascript中不起作用

Question

由于某种原因，我的数据排序方法在我的反应应用程序中不起作用，即返回值没有改变

将此视为我的状态和变量

    state = {
        percentageHighestOrLeast: "highest", //highest or lowest
        townOrCounty: "town",  //town or county
        amountMaximumOrMinimum: "maximum" //maximum or minimum
    }

现在在render 我正在检查数据是否在没有任何内容的情况下加载 错误然后调用函数

if (!this.props.mainListFetching && !this.props.mainListError) {  
            this.highestOrLeast = this.sortingData(this.props.mainList, this.state.percentageHighestOrLeast)
            this.townOrCounty = this.sortingData(this.props.mainList, this.state.townOrCounty)
            this.amountMaximumOrMinimum = this.sortingData(this.props.mainList, this.state.amountMaximumOrMinimum)
        }

我的this.sortinfData 长这样（这个方法被成功调用了）

sortingData = (data, type) => {
   data.sort((a, b) => {
       if (type == "highest") return (a["percentage.funded"] - b["percentage.funded"])
       if (type == "lowest") return (b["percentage.funded"] - a["percentage.funded"])
       if (type == "town") return (a["type"].localeCompare(b["type"]))
       if (type == "county") return (b["type"].localeCompare(a["type"]))
       if (type == "maximum") return (a["amt.pledged"] - b["amt.pledged"])
       if (type == "minimum") return (b["amt.pledged"] - a["amt.pledged"])
    })
 return data
}

如果我 console.log this.highestOrLeast 或 'this.amountMaximumOrMinimum' 或 this.townOrCounty，它们都会抛出相同的结果

这就是我的数据的样子

[
  {
    "s.no": 0,
    "amt.pledged": 15823,
    "blurb": "'Catalysts, Explorers & Secret Keepers: Women of Science Fiction' is a take-home exhibit & anthology by the Museum of Science Fiction.",
    "by": "Museum of Science Fiction",
    "country": "US",
    "currency": "usd",
    "end.time": "2016-11-01T23:59:00-04:00",
    "location": "Washington, DC",
    "percentage.funded": 186,
    "num.backers": "219382",
    "state": "DC",
    "title": "Catalysts, Explorers & Secret Keepers: Women of SF",
    "type": "Town",
    "url": "/projects/1608905146/catalysts-explorers-and-secret-keepers-women-of-sf?ref=discovery"
  },
  {
    "s.no": 1,
    "amt.pledged": 6859,
    "blurb": "A unique handmade picture book for kids & art lovers about a nervous monster who finds his courage with the help of a brave little girl",
    "by": "Tyrone Wells & Broken Eagle, LLC",
    "country": "US",
    "currency": "usd",
    "end.time": "2016-11-25T01:13:33-05:00",
    "location": "Portland, OR",
    "percentage.funded": 8,
    "num.backers": "154926",
    "state": "OR",
    "title": "The Whatamagump (a hand-crafted story picture book)",
    "type": "Town",
    "url"

[问题：]谁能帮我弄清楚我在这里可能做错了什么？

Answer 1

如果可以的话，我会发表评论，但我没有声誉。无论如何，请记住，如果您提供了正在发生的事情的完整示例，那么提供帮助会更容易。您提供的信息存在很多问题，难以提供帮助。

您提供的更新数据似乎仍然不完整。我拥有的视图在属性之后的数组的第二项中被截断：

"state": "OR",

您引用按城镇或县排序 (state.townOrCounty)，但数据似乎只有州和国家/地区。

再一次，用这样的东西，它可能有助于制作一个 jsfiddle 或其他东西来展示什么有效，什么有效。我尝试在https://jsfiddle.net/c5fgy291/4/ 创建一个。欢迎您查看它，看看它是否有帮助。它将您的有限数据从最小值排序到最大值或最大值到最小值。我放弃了按照您的方式调用 sort 函数，但这可能仍然有效。抱歉，我无法提供更多帮助。

我马上注意到的几点是，您似乎试图通过直接编辑对象的值来更改对象的状态；即

if (!this.props.mainListFetching && !this.props.mainListError) {  
    this.highestOrLeast = this.sortingData(this.props.mainList, this.state.percentageHighestOrLeast)
    this.townOrCounty = this.sortingData(this.props.mainList, this.state.townOrCounty)
    this.amountMaximumOrMinimum = this.sortingData(this.props.mainList, this.state.amountMaximumOrMinimum)
}

您应该使用 setState 函数。在我制作的小提琴中，我编写了一个单独的函数来显示它正在被使用。在我的小提琴中，我假设您想根据承诺金额或他们居住的城镇等更改数据中项目的显示顺序。为此，您的数据应该是组件状态的一部分。这样，您可以对数据进行排序（理想情况下，我认为是数据的副本），然后更新状态。我在小提琴中添加了按钮，可让您按最小值和最大值排序。

所以，这是我的初始状态声明。

 state = {
        percentageHighestOrLeast: "highest", 
        townOrCounty: "town",  
        amountMaximumOrMinimum: "minimum", 
        pledges: data.slice(0),   //  data is outside of component In my implementation
    }

在这里，这是一个块，当你想确保它被排序时，你可以将它放在某个地方。但是，不在 render 函数中，因为它是在状态更新后调用的。在我的示例中，它是通过单击按钮调用的。 {

  if (!this.props.mainListFetching && !this.props.mainListError) {
    const newData = this.sortingData(this.state.pledges, "somethingHere");
    this.setState({
        pledges: newData,
    })                

}

调用setState时，会自动调用render函数。我的渲染函数是这样的（我展示这个是为了说明将数据包含在状态中可以让它自动更新。还要注意我写了一个单独的 Pledge 组件）。

render() {
    <h3>Pledges</h3>

      {this.state.pledges.map((pledge, i) => <Pledge { ...pledge } key={pledge['s.no']}  />)}
    </div>;
  }
}

Answer 2

您的函数返回的数据与您通过第一个参数传递的数据相同，您没有将排序方法归因于将返回的值。

sortingData = (data, type) => {
       data.sort((a, b) => {
           if (type == "highest") return (a["percentage.funded"] - b["percentage.funded"])
           if (type == "lowest") return (b["percentage.funded"] - a["percentage.funded"])
           if (type == "town") return (a["type"].localeCompare(b["type"]))
           if (type == "county") return (b["type"].localeCompare(a["type"]))
           if (type == "maximum") return (a["amt.pledged"] - b["amt.pledged"])
           if (type == "minimum") return (b["amt.pledged"] - a["amt.pledged"])
        })
     return data
    }

你需要做的只是改变：

sortingData = (data, type) => {
           return data.sort((a, b) => {
               if (type == "highest") return (a["percentage.funded"] - b["percentage.funded"])
               if (type == "lowest") return (b["percentage.funded"] - a["percentage.funded"])
               if (type == "town") return (a["type"].localeCompare(b["type"]))
               if (type == "county") return (b["type"].localeCompare(a["type"]))
               if (type == "maximum") return (a["amt.pledged"] - b["amt.pledged"])
               if (type == "minimum") return (b["amt.pledged"] - a["amt.pledged"])
            })
        }

或者甚至只是data = data.sort 然后返回数据