Question

我正在尝试根据联系人的标题对结果（JSON文件）重新排序。

初始渲染工作正常，以JSON文件的结果在JSON文件中的顺序显示它们。

当我更改选择下拉列表时，我希望它会更新呈现出JSON结果的.map函数（第143行）。

发生了什么事。没有变化，没有错误，只是select下拉选项更改为所选值。

不太确定为什么它不起作用，花了几个小时尝试调试，打赌它真的很简单，我错过了。

任何帮助都将不胜感激，因为我不知道是什么问题。

var getContactList = [
    {
      "id": 1,
      "name": "Leanne Graham",
      "username": "Bret",
      "job": "Manager",
      "email": "Sincere@april.biz",
      "phone": "1-770-736-8031 x56442",
      "website": "http://www.hildegard.org",
      "company": "Romaguera-Crona"
    },
    {
      "id": 2,
      "name": "Ervin Howell",
      "username": "Antonette",
      "job": "CEO",
      "email": "Shanna@melissa.tv",
      "phone": "010-692-6593 x09125",
      "website": "http://www.anastasia.net",
      "company": "Deckow-Crist"
    },
    {
      "id": 3,
      "name": "Clementine Bauch",
      "username": "Samantha",
      "job": "Manager",
      "email": "Nathan@yesenia.net",
      "phone": "1-463-123-4447",
      "website": "http://www.ramiro.info",
      "company": "Romaguera-Jacobson"
    },
    {
      "id": 4,
      "name": "Patricia Lebsack",
      "username": "Karianne",
      "job": "Store Clerk",
      "email": "Julianne.OConner@kory.org",
      "phone": "493-170-9623 x156",
      "website": "http://www.kale.biz",
      "company": "Robel-Corkery"
    },
    {
      "id": 5,
      "name": "Chelsey Dietrich",
      "username": "Kamren",
      "job": "Store Clerk",
      "email": "Lucio_Hettinger@annie.ca",
      "phone": "(254)954-1289",
      "website": "http://www.demarco.info",
      "company": "Keebler LLC"
    },
    {
      "id": 6,
      "name": "Mrs. Dennis Schulist",
      "username": "Leopoldo_Corkery",
      "job": "Store Clerk",
      "email": "Karley_Dach@jasper.info",
      "phone": "1-477-935-8478 x6430",
      "website": "http://www.ola.org",
      "company": "Considine-Lockman"
    },
    {
      "id": 7,
      "name": "Kurtis Weissnat",
      "username": "Elwyn.Skiles",
      "job": "Manager",
      "email": "Telly.Hoeger@billy.biz",
      "phone": "210.067.6132",
      "website": "http://www.elvis.io",
      "company": "Johns Group"
    },
    {
      "id": 8,
      "name": "Nicholas Runolfsdottir V",
      "username": "Maxime_Nienow",
      "job": "Store Clerk",
      "email": "Sherwood@rosamond.me",
      "phone": "586.493.6943 x140",
      "website": "http://www.jacynthe.com",
      "company": "Abernathy Group"
    },
    {
      "id": 9,
      "name": "Glenna Reichert",
      "username": "Delphine",
      "job": "Store Clerk",
      "email": "Chaim_McDermott@dana.io",
      "phone": "(775)976-6794 x41206",
      "website": "http://www.conrad.com",
      "company": "Yost and Sons"
    },
    {
      "id": 10,
      "name": "Clementina DuBuque",
      "username": "Moriah.Stanton",
      "job": "Store Clerk",
      "email": "Rey.Padberg@karina.biz",
      "phone": "024-648-3804",
      "website": "http://www.ambrose.net",
      "company": "Hoeger LLC"
    }
  ];

const App = React.createClass({

  getInitialState: function() {
    return {
      orderSelect: ''
    };
  },
  change: function(e) {
    this.setState({
      orderSelect: e.target.value
    });
  },
  render: function() {
    var contactsData = this.props.items,
      orderSelect = this.state.orderSelect.trim().toLowerCase();

    if (String(orderSelect) == "asc") {
      contactsData.sort(function(a, b) {
        return a.name.toLowerCase() > b.name.toLowerCase();
      })
    } else if (String(orderSelect) == "desc") {
      contactsData.sort(function(a, b) {
        return a.name.toLowerCase() < b.name.toLowerCase();
      })
    } else if (String(orderSelect) == "submitted") {
      contactsData = getContactsList
    }

    return( 
    <div>

      <select onChange={this.change} value={this.state.orderSelect}>
        <option value="" disabled=""> Sort by </option> 
        <option value="submitted"> Submitted Date </option> 
        <option value="asc"> A - Z </option> 
        <option value="desc"> Z - A </option> 
      </select>

      {
        contactsData.map(function(l, index) {
          return (
            <div key={index}>
              {l.name}
            </div>
          )
        })
      }

      </div>           
    );

  }
});


ReactDOM.render(
<App items={getContactList} />,
document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>

<div id="app"></div>

Answer 1

您是否得到了答案？这是我的解决方案，希望对您有所帮助。

getContactList
   .sort(
      ({ job: prevOr }, { job: curOr }) => prevOr - curOr
   )
   .map((slider) => (
      <SliderItem key={slider.order} slider={slider} />
   ))

我将创建一个三元数，如果值是A-Z则是此代码，如果值是Z-A则应使用curOr-prevOr。

ReactJS-按升序和降序排序

1 个答案: