React：如何在 ReactJS 中重置状态值答案

【问题标题】：React : How to reset state value in ReactJSReact：如何在 ReactJS 中重置状态值
【发布时间】：2019-03-21 17:26:49
【问题描述】：

我正在排序。实际上它工作正常我可以在 asc 和 desc 中对数据进行排序。我正在对不同的字段进行排序。例如，如果用户想要对字段 1 的数据进行排序并且用户单击下一步（我也在使用分页），我在表中有 5 个字段，现在假设用户在第 5 页并且用户想要在这里对字段 2 的数据进行排序我想要将状态的值重置为初始值（状态的初始值 val1=5 和 val2=0 ）。我将如何做到这一点，我是 ReactJS 的新手，有人可以帮我解决这个问题。

对不起，如果我因为不是母语而在英语语法上犯了错误。

代码

    sortingData= (ascValue,desValue) => {
this.setState(
   {
     dataSort:
     this.state.sortedData === ascValue? desValue: ascValue
   },
   () => {
     this.loadData();
   }
);

}

**Full Component Code**

    class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:8001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

【问题讨论】：

对不起，我不明白你想做什么
@Maxwells.c 。我更新了我的问题，请看一下
@Maxwells.c 实际上我正在对 table 的每个字段进行排序。例如，如果用户想要对表中的字段 1 进行排序，他单击下一步以获取更多数据，以正确获取排序数据，但如果用户想要对表中字段 2 的数据进行排序，我想重置 state 的值，它们是在下一个按钮上增加
你想重置分页状态对吧？如果是，只需为状态中的元素设置一个空数组，然后获取有序项
是的，当用户点击其他字段时，我想将 state 的值重置为初始值。我是初学者，你能帮帮我吗？

标签： javascript arrays reactjs ecmascript-6 es6-promise

【解决方案1】：

最好让所有五个数据都有状态。

// 在构造函数中

state = {
    dataSort: {
        data1: {sortedBy: asc, pagination: 1},
        data2: {sortedBy: asc, pagination: 1},
        data3: {sortedBy: asc, pagination: 1}, 
        data4: {sortedBy: asc, pagination: 1},
        data5: {sortedBy: asc, pagination: 1}
    }
}

// 更新特定数据的排序逻辑时

this.setState({
    dataSort: {
        ...dataSort,
        data1: {
            sortBy: this.state.dataSort.data1 === val1? val2  : val1;
            pagination: 5
        }
    }
})

现在，如果您想重置，则只需更改特定数据的分页值或排序值即可。

【讨论】：

排序工作正常，但我想重置 State 的值 Item ，skip 和 sortedData