Question

我希望客户端排序能够让用户按不同的键进行排序。键只是整数。

现在我在map函数之前调用我的sort函数：

.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，然后重新呈现列表，但我不确定在用户点击后如何再次呈现列表。

如果我只使用已知密钥提供sort函数，则排序工作正常。

编辑：从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

我会这样做：

首先，在您的componentWillMount方法中，我会将您的投票存储在州内。
然后，当您的用户点击该按钮时，将投票值存储在let变量上并对该变量进行排序。
最后，使用新的排序数组更新您的状态。

这样，每次对数组进行排序时，组件都会重新渲染：

=TEXT(A1,"hh:mm:ss")&" " &TEXT(B1,"hh:mm:ss")

请记住，当您必须在许多视图之间共享数据时，Redux会变得很方便，但如果您只是在单个视图中显示数据，那么使用组件状态会更有用。

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

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

2 个答案: