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

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

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

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

编辑：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>
        );
      });
  }

renderSurveys（）{
//自定义助手方法
把这个还给我
.排序（功能（a、b）{
返回b.yes-a.yes；
})
.map（调查=>{
常数数据=[
{文本：“是”，值：survey.Yes}，
{文本：“否”，值：survey.No}
];
//反转阵列，然后在其上进行映射，首先是最新的
返回(
{survey.title}
发送日期：{新日期（survey.dateSent）.toLocaleDateString（）}


上次响应时间：{“”}
{新日期（survey.lastResponsed.toLocaleDateString（）}

this.props.deleteSurvey（survey.\u id）}
className=“btn浮动btn大红色右侧”
>
清楚的
);
});
}

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

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

我将执行以下操作：

首先，在您的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 });
}

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

我将使用redux长期存储de值，并将其存储在应用程序中，但使用状态来操纵该数据的显示。

我将按照以下操作：

首先，在您的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 });
}

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

---

我会使用redux长期存储de值，并将其存储在应用程序中，但状态会操纵该数据的显示。

能否更具体地说明如何实现密钥？我猜您没有更改状态，因此react不知道需要更新UI。请签出并尝试

forceUpdate（）

，或者对值进行排序并将结果存储在您的状态中。@EnriqueDev My sortKey尚未完全实现。我正在使用redux从action creator获取JSON对象中的密钥。this.props.fetchSurveys（）；有什么改进吗？@EnriqueDev我将状态存储在生命周期挂钩上，但我不确定如何正确调用sortList（）。上面写着：“应该是array.sort（）调用。您能否更具体地说明如何实现键？我猜您没有更改状态，因此react不知道需要更新UI。请签出并尝试

forceUpdate（）

，或者对值进行排序并将结果存储在您的状态中。@EnriqueDev My sortKey尚未完全实现。我正在使用redux从action creator获取JSON对象中的密钥。this.props.fetchSurveys（）；有什么改进吗？@EnriqueDev我将状态存储在生命周期挂钩上，但我不确定如何正确调用sortList（）。它说：“预期会调用array.sort（）。我正在使用带有redux的action creator从后端的API获取数据。加载组件时，将调用获取数据的操作，并将状态映射到组件属性。与其解释代码的每个步骤，不如添加更完整的示例。在不知道如何呈现列表或如何以及在何处实现排序的情况下，很难给出一个好的答案。我使用带有redux的action creator从后端的API获取数据。加载组件时，将调用获取数据的操作，并将状态映射到组件属性。与其解释代码的每个步骤，不如添加更完整的示例。在不知道如何呈现列表或如何以及在何处实现排序的情况下，很难给出一个好的答案。谢谢您的回答。你在州里储存选票是什么意思？排序后如何更新状态？谢谢您的回答。你在州里储存选票是什么意思？排序后如何更新状态？