Question

当我在状态（EG 1）中为其中一个键使用变量时，即使卸载了组件，状态也将保持不变。

直接将对象放入（EG 2）不会出现此类问题

我无法绕开为什么……

    const form = {
        foo: bar
    }

    class extends React.Component {
        state = {
             form: form
         }

        render() {...}
    }

    class extends React.Component {
        state = {
            form: {
                foo: bar
            }
        }
        render() {...}
    }

Answer 1

该变量用于状态值之一，而不用作键。

顺便说一句，由于JS，状态仍然存在。

在JS对象中，引用是通过引用传递的，所以当您这样做时：

const form = {
    foo: bar
}

class extends React.Component {
    state = {
         form: form
     }

    render() {...}
}

无论何时更改表单（甚至通过状态），实际上都是在更改上面定义的全局实例。

定义反应组件时，该组件将被安装和卸载，但是在导入文件时，类外部的代码将被执行一次。

这就是为什么当您再次安装该组件时，会找到form对象的先前值，但从未清除。

要解决此问题，请将所有逻辑初始化为组件代码（如静态或构造函数或componentDidMount等）中的init，或者在componentWillUnmount中将其重置为初始状态全局form变量，那么当您再次安装组件时，应该回头看初始状态。

Answer 2

使用单例模块导入进行反应。

虽然安装的组件将在每次使用时重建，但声明只发生一次，并在所有应用程序范围内共享该模块的一个实例。

组件外部的所有设置都与React.Component生态系统无关，并且不会在componentWillUnmount之后被破坏。

如果将form变量用作状态的抽象模板，则应将其散布并遵循不可变的方法：

  const form = {
    foo: bar
}

class extends React.Component {
    state = {
         form: {...form}
     }

    render() {...}
}

Answer 3

我尝试回答。您使用“窗口”声明一个全局变量，然后在该变量的类内调用。我不知道它是否有效，但是当我尝试将js中的文件转换为打字稿时，我会解决过去。

window.form = {}
window.form = {
    foo: bar
}

class extends React.Component {
    state = {
         form: window.form
     }

    render() {...}
}

class extends React.Component {
    state = {
        form: {
            foo: bar
        }
    }
    render() {...}
}

当使用变量作为状态时，React State将保持不变

3 个答案: