如何在每次导入时获取导出对象的新实例？

Question

我有这个文件，我正在为正在构建的表单字段保留INITIAL_VALUE。

INITIAL_VALUE.js

const INITIAL_VALUE = [];

export default INITIAL_VALUE;

问题是INITIAL_VALUE是一个数组。非基元，由引用处理。

Component1.js

import INITIAL_VALUE from "./INITIAL_VALUE";
import React, { useState } from "react";

function Component1(props) {
  const [myState, setMyState] = useState(INITIAL_VALUE);
  const [boolean, setBoolean] = useState(false);

  function handleClick() {
    setMyState(prevState => {
      prevState.push(1);
      return prevState;
    });
    setBoolean(prevState => !prevState);
    props.forceUpdateApp();
  }

  return (
    <React.Fragment>
      <div>This is my state: {JSON.stringify(myState)}</div>
      <button onClick={handleClick}>Modify State Comp1</button>
    </React.Fragment>
  );
}

export default Component1;

Component2.js

The same as Component1, but it's named Component2 and it has its own file.

App.js

function App() {
  const [boolean, setBoolean] = useState(false);

  function forceUpdateApp() {
    setBoolean(prevState => !prevState);
  }

  return (
    <React.Fragment>
      <Component1 forceUpdateApp={forceUpdateApp} />
      <Component1 forceUpdateApp={forceUpdateApp} />
      <Component2 forceUpdateApp={forceUpdateApp} />
    </React.Fragment>
  );
}

CodeSandbox

问题

Component1.js和Component2.js都导入INITIAL_VALUE文件。 我的印象是，这些导入中的每一个都将获得 INITIAL_VALUE对象的全新实例。但是事实并非如此，正如我们从下面的GIF中可以看到的：

问题

是否有一种方法可以将数组作为初始值保留在另一个文件中声明和导入的状态，并在每次导入时始终获取对其的新引用？我可以使用另一种模式来解决这个问题吗？还是应该只使用原始值并将其设置为null而不是[]并将其初始化到使用者文件中？

Answer 1

  

是否有一种方法可以将数组作为初始值保留在另一个文件中声明和导入的状态，并在每次导入时始终获取对其的新引用？

不，那不可能。模块的最顶层代码最多将运行一次 。在这里，quit的顶层定义了一个一个数组并将其导出，因此导入它的所有内容都将引用同一数组。

最简单的调整是导出创建数组的函数：

INITIAL_VALUE.js

然后

// makeInitialValue.js
export default () => {
  const INITIAL_VALUE = [];
  // the created array / object can be much more complicated, if you wish
  return INITIAL_VALUE;
};

在简化的情况下，您只需要一个空数组，将其传递给import makeInitialValue from "./makeInitialValue"; function Component1(props) { const INITIAL_VALUE = makeInitialValue(); const [myState, setMyState] = useState(INITIAL_VALUE); 时定义它会更容易。

话虽如此，修复您的代码最好不要使现有状态发生变化，这会更好。更改

useState

到

setMyState(prevState => {
  prevState.push(1);
  return prevState;
});

那样，即使所有组件和组件实例都从同一数组开始，也不会引起问题，因为该数组永远不会发生突变。