在React中更改渲染映射数组的排序键

Question

我想要客户端排序，使用户能够按不同的键进行排序。这些键只是整数。

现在，我打电话给我的排序函数映射功能前右：

.sort(function(a, b) { 
     return b.sortKey- a.sortKey; 
     } 

当用户按下一个按钮，则SORTKEY应更改为指定的值。这些都包含在一个反应​​组件中，而不是一个函数。我读过一个组件上的属性不应该被组件本身改变，那么我将如何去改变按钮按下的sortKey？

我的渲​​染功能包含两个排序选项和列表：

render() { 
    return (
     <div className="row"> 
     <div className="col s12"> 
      <button onClick={() => this.changeSortKey("yes")} style={{ marginRight: 5, marginTop: 5 }} className="btn"> 
      Yes Votes 
      </button> 
      <button onClick={() => this.changeSortKey("no")} style={{ marginTop: 5 }} className="btn"> 
      No Votes 
      </button> 
     </div> 

     {this.renderSurveys()} 
     </div> 
    ); 
    } 

的changeSortKey（Key）的功能会非常改变SORTKEY，然后重新呈现列表中，但我不知道如何使该列表再次在用户点击之后。

如果我只是提供一个已知键的排序功能，排序完美的作品。

编辑：从API获取数据

export const fetchSurveys =() => async dispatch => { 
    const response = await axios.get("/api/surveys"); 
    dispatch({ type: FETCH_SURVEYS, payload: response.data }); 
}; 

编辑：RenderSurveys辅助函数

renderSurveys() { 
    //custom helper method 
    return this.props.surveys 
     .sort(function(a, b) { 
     return b.yes - a.yes; 
     }) 
     .map(survey => { 
     const data = [ 
      { text: "Yes", value: survey.yes }, 
      { text: "No", value: survey.no } 
     ]; 
     //reverse the array and then map over it, newest first 
     return (
      <div className="col s6"> 
      <div key={survey._id} className="card darken-1"> 
       <div className="card-content"> 
       <span className="card-title">{survey.title}</span> 
       <p>Sent On: {new Date(survey.dateSent).toLocaleDateString()}</p> 
       <p> 
        Last responded on:{" "} 
        {new Date(survey.lastResponded).toLocaleDateString()} 
       </p> 
       </div> 

       <div className="card-action"> 
       <a href="#">Yes: {survey.yes}</a> 
       <a href="#">No: {survey.no}</a> 
       <BarChart width={100} height={70} data={data} /> 
       <button 
        onClick={() => this.props.deleteSurvey(survey._id)} 
        className="btn-floating btn-large red right" 
       > 
        <i className="material-icons">clear</i> 
       </button> 
       </div> 
      </div> 
      </div> 
     ); 
     }); 
    } 

Answer 1

如果您存储在状态数据的排序版本，当你重新排序，然后设置它到状态的组件将被渲染与新的排序阵列。

Answer 2

我会做如下：

1. 首先，在你的componentWillMount方法我将存储状态您的投票。

2. 然后，当用户单击该按钮时，将投票值存储在一个let变量中并对该变量进行排序。

3. 最后，用新的排序数组更新你的状态。

这样，你的组件将重新渲染每次你解决你的数组：

componentWillMount() { 
    this.setState({ myArray: this.props.yourReduxStoredProp }); 
} 

_sortList() => { 
    // retrieve your array from state 
    let myArray = this.state.myArray; 

    // sort the array locally 
    myArray.sort(function(a, b) { 
    return b.sortKey- a.sortKey; 
    }); 

    // update the state and, because of the change it state, the component re-renders 
    this.setState({ myArray: myArray }); 
} 

请记住，当你有许多共同的观点之间的数据终极版就会变得很方便，但如果你只是显示数据在单一视图中，使用组件状态更有用。

我会使用REDX来长期存储DE值，并将它们保存在您的应用程序中，但操作该数据显示的状态。