javascript - ReactJS 将对象复制到新的状态变量或在树中传递状态

Question

标题有点难以解释......这就是我正在做的......

我有一个 React 应用程序，它正在访问 API 并返回一些结果，用户可以选择在获得这些结果时对这些结果执行 CRUD 操作，这发生在引导模式弹出窗口中......

React 建议将状态提升到父级，这是可以的...但是接下来我会遇到这样的情况:用户在 UPDATE 操作中修改状态，然后改变主意并返回并在原始窗口中留下修改后的状态(这让我别无选择，只能再次从 API 获取以刷新它)

选项 1: 我可以将有状态对象复制到一个新对象并对其进行修改...如果用户取消，则将其丢弃，但在这种情况下，我遇到了有关复制对象和的 JavaScript 怪癖引用文献(How do I correctly clone a JavaScript object?)，我没有足够的经验来解决。

选项2:我可以以某种方式将对象传递给UPDATE子类，然后在那里设置状态，但这似乎违背了reactJS哲学，它表明因为我在尝试时遇到了错误。

我基本上需要一种方法来临时修改状态并留下一种返回到原始状态的方法，但我还没有找到任何解决方案(由于 react 结构和javascript怪癖......)

class base extends React.Component {
    constructor() {
        super(props);
        this.state = {foo: "bar"}
    }

    render() {
        // I want to be able to modify the state from BootStrapPopup with
        // the option to go back to the original state if the user backs
        // out from committing updating the object through the API
        return (
            <BootStrapPopup />
        )
    }

Answer 1

您可以保留存储 prevState 的状态，例如

class base extends React.Component {
    constructor() {
        super(props);
        this.state = {foo: "bar", prevFoo: ""}
    }
    ChangeState = () => {
       this.setState((prevState) => { prevFoo: prevState.foo, foo: "newBar"});
    }
    RevertChange = () => {
       this.setState({foo: this.state.prevFoo});
    }
    render() {

        return (
            <BootStrapPopup />
        )
    }