在React中更改渲染映射數組的排序鍵

我想要客戶端排序，使用戶能夠按不同的鍵進行排序。這些鍵只是整數。在React中更改渲染映射數組的排序鍵

現在，我打電話給我的排序函數映射功能前右：

.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> 
     ); 
     }); 
    }

來源

2017-10-04 Leth

你能對你如何實現你的密鑰更具體一點嗎？ – EnriqueDev

我猜你沒有改變你的狀態，所以反應並不知道它需要更新用戶界面。看看[這個問題]（https://stackoverflow.com/questions/30626030/can-you-force-a-react-component-to-rerender-without-calling-setstate），也許嘗試'forceUpdate（）'，或對值進行排序並將結果存儲在您的狀態中。 –

@EnriqueDev我的sortKey還沒有完全實現。我從使用redux的動作創建者處獲取JSON對象中的密鑰。 this.props。fetchSurveys（）; – Leth

如果您存儲在狀態數據的排序版本，當你重新排序，然後設置它到狀態的組件將被渲染與新的排序陣列。

來源

2017-10-04 08:46:33 bennygenel

我從後端的API獲取數據，使用動作創建器和redux。當組件加載時，調用獲取數據的操作並將狀態映射到組件屬性。 – Leth

而不是解釋你的代碼的每一步，請添加更完整的例子。不知道你是如何呈現你的名單，或者你如何以及如何實施，很難給出一個好的答案。 – bennygenel

我會做如下：

首先，在你的componentWillMount方法我將存儲狀態您的投票。
然後，當用戶單擊該按鈕時，將投票值存儲在一個let變量中並對該變量進行排序。
最後，用新的排序數組更新你的狀態。

這樣，你的組件將重新渲染每次你解決你的數組：

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值，並將它們保存在您的應用程序中，但操作該數據顯示的狀態。

來源

2017-10-04 09:08:12 EnriqueDev

感謝您的回答。通過存儲關於狀態的選票，你的意思是什麼？如何在排序後更新狀態？ – Leth

現在你有一些代碼在那裏 – EnriqueDev

在React中更改渲染映射數組的排序鍵

回答

相關問題