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

Question

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

现在我在 map 函数之前调用排序函数:

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

当用户按下按钮时，sortKey 应更改为指定值。这全部包含在 react 组件中，而不是函数中。我读到组件的属性不应由组件本身更改，那么我该如何更改按钮按下时的 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

如果您将数据的排序版本存储在状态中，则当您重新排序然后将其设置为状态时，组件将使用新的排序数组进行渲染。