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

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

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然后返回数据

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

2 个答案: