我是偶然创造了一个全球状态吗？

Question

我正在构建一个React web应用程序，该应用程序分为多个组件，可通过React选项卡访问：

import React from 'react';
import ReactDOM from 'react-dom';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import a from './components/a';
import b from './components/b';

const TabNavigator = () => (
    <Tabs>
        <TabList>
            <Tab> A </Tab>
            <Tab> B </Tab>
        </TabList>

        <TabPanel>
            <a />
        </TabPanel>
        <TabPanel>
            <b />
        </TabPanel>
    </Tabs>
);

ReactDOM.render(<TabNavigator />, document.getElementById('root'));

每个选项卡都是其自己的组件/子系统，在访问该选项卡时新呈现。在每个选项卡中，我都使用一个JSON文件的数据。此数据加载到每个组件的状态，如下所示：

constructor(props) {
    super(props);

    this.state = {
        data: json
    };
}

我现在正在更改其中一个组件中的状态，以触发使用新数据重新渲染：

this.setState({
    data: editedJson
});

到目前为止还不错，但是当我现在切换到另一个选项卡/组件this.state.data在那里也发生了变化-为什么会发生这种情况？组件之间是否共享状态？

编辑：这是一个MVCE，您可以在其中更改B中的状态，也可以在A中更改：

Answer 1

所有组件中的json都有相同的指针，所以所有组件都访问相同的对象并更改它。

要解决这个问题，您必须为每个组件创建全新的对象，如下所示：

this.state = {
    data: { ...json }
};

Answer 2

我能够像这样复制你的问题：

import React from "react";
import ReactDOM from "react-dom";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";

import "./styles.css";

let json = { title: "I am a title" };

function Content({tab}) {
  const [state, setState] = React.useState(json);

  return (
    <div>
      <h1>{tab}</h1>
      <h2>{state.title}</h2>
      <label>New Title</label>
      <input type="text" value={state.title} onChange={handleChange} />
    </div>
  );

  function handleChange(e) {
    json = { title: e.target.value };
    setState(json);
  }
}

function TabNavigator() {
  return (
    <Tabs>
      <TabList>
        <Tab>A</Tab>
        <Tab>B</Tab>
      </TabList>
      <TabPanel><Content name="A" /></TabPanel>
      <TabPanel><Content name="B"/></TabPanel>
    </Tabs>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<TabNavigator />, rootElement);

当您更新“全局”对象json，然后使用它更新组件状态时，就会出现问题。请参见handleChange功能；我首先更新json对象，然后用它设置新组件state。

当您切换到另一个选项卡时，将创建一个新组件，该组件将从“全局”json对象实例化其状态，因此，该组件将与另一个选项卡具有相同的内容。在它们之间切换时，此过程会重复。

如果您删除此分配以更新状态，则问题已得到解决（只需执行设置状态（{title:e.target.value}）。但您无法保留更改。若要解决此问题，我建议使用React上下文。这里是一个指向CodeSandbox的链接，您可以在其中看到它的操作。

我希望有帮助。

Answer 3

似乎当您导入该JSON文件时，您正在创建一个内存版本的JSON文件，然后这两个组件都在引用该文件。如果您按照@Christiaan在构造函数中的建议复制值（排列），那么您可以避免对原始值进行变异，这是一种糟糕的做法。

实际上有几个因素对你不利。首先是导入被缓存的事实（在这里解释），所以每次挂载选项卡时，json导入都会返回缓存的引用，该引用存储在data中，并且在构造函数中，您将该引用值保存到state.data.第二个是setState函数不是一个纯粹的函数。它只是再次复制引用，并在您真正想要创建新数组时改变它指向的数组，并在添加新元素之前浅复制所有元素。下面是另一个沙盒，应该有助于说明这一点。