Question

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

我也在使用mdl作为用户界面，我注意到如果我跨组件移动，像materialSnackbar函数这样的功能就会停止工作。我不知道它是否与我正在使用反应路由器的事实有关，而这些使用这些功能的组件是props.children

Answer 1

如果要回退组件的状态，则需要将其存储在父组件中以便回放。目前在香草反应中，没有办法重新缠绕组件的内部状态而不在其他地方跟踪它。

所以我们假设您有以下组件

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

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

将状态更改回以前的值

1 个答案: