将状态更改回之前的值答案

【问题标题】：Change back a state to previous value将状态更改回之前的值
【发布时间】：2017-02-27 23:37:10
【问题描述】：

实际上我有疑问，但主要问题是，一旦我发出更改并在 componentWillMount 中捕获它以创建 setState，我如何将该状态更改回它的先前值？我尝试在 componentDidMount 上编写 setState，但它会引发最大堆栈调用。

我还在 UI 中使用 mdl，我注意到如果我跨组件移动，一些功能（如 materialSnackbar 功能）将停止工作。我不知道这是否与我正在使用 react router 并且使用这些功能的这些组件是 props.children 的事实有关

【问题讨论】：

标签： reactjs meteor flux

【解决方案1】：

如果您想回退组件的状态，您需要将其存储在父组件中以便回退。目前在 vanilla react 中，没有办法在不跟踪组件的其他地方的情况下重绕组件的内部状态。

假设你有以下组件

class ParentComponent extends React.Component {
    getInitialState() {
        return({
            stateHistory: [
                          { name: "foo" },
                          { name: "bar" }
                          { name: "baz" }
                          ],
            stateHistoryIndex: 0
        })
    },

    onRewind() {
        this.setState({
            stateHistoryIndex: this.state.stateHistoryIndex += 1
        });
    },

    render() {
        return(
            <div>
             <ChildComponent 
                 data={this.state.stateHistory[this.state.stateHistoryIndex]} 
                  handleRewind={this.onRewind}
              />
            </div>
        )
    }
}

class ChildComponent extends React.Component {
    render()  {
        return(
            <div>
                Hi, my name is {this.props.data.name}
                <button onClick={() => this.props.handleRewind()}>Rewind</button>
            </div>
        )
    } 
}

如您所见，我们需要将状态存储在父组件中，并通过我们可以通过子组件控制的索引来访问它。

【讨论】：