reactjs - react 。当在组件函数中导入函数时，我能知道为什么它不起作用 hooks setState..？

Question

我尝试在需要时对调用函数进行代码拆分。

所以我将功能从组件中分离出来。

//Split.js
const Split = () => {
  return <div>It`s text</div>;
};

export default Split;

它在 React 类组件中工作。

//App.js
class App extends Component {
  state = {
    Split: null
  };
  handleClick = () => {
    import("./Split").then(({ default: Split }) => {
      this.setState({
        Split
      });
    });
  };
  render() {
    const { Split } = this.state;
    return (
      <div>
        <button onClick={this.handleClick}>Click Me</button>
        {Split && <Split />}
      </div>
    );
  }
}

这是类组件链接(工作) https://codesandbox.io/s/code-splitting-1-bbtpe

但是当我更改为 Hooks 函数组件时，它不起作用..

const App = () => {
  const [split, setSplit] = useState(null);
  const handleClick = () => {
    import("./Split").then(({ default: Split }) => {
      // console.log(SplitMe());
      setSplit(Split);
    });
  };

  const SplitMe = split;
  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      {SplitMe && <SplitMe />}
    </div>
  );
};

并引发错误

错误:元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但得到:对象。

这是功能组件链接(工作) https://codesandbox.io/s/code-splitting-2-4flbm

我能知道类组件的 setState 和函数组件的 setState(hook) 有什么不同吗？

谢谢!

Answer 1

setState以及 useState 返回的函数采用两种类型的参数:

1. 您可以直接为其设置一个值。
2. 您可以向其传递一个函数，他们将使用之前的状态作为参数来调用该函数。

在函数版本中，您导入了一个函数Split并将其用于:

setSplit(Split);

请注意Split这是一个函数，适用的是 setState 的第二个版本。它会直接调用该函数，而不是将函数保留为组件。如果使用()调用该组件，<Split />的类型无效(因为React不能再调用它，它不是一个函数)

要解决这个问题，您可以存储 Split作为一个对象，就像在类组件的情况下一样。

const [split, setSplit] = useState(null);
const handleClick = () => {
  import("./Split").then(({ default: Split }) => {
    setSplit({ Split });
  });
};
const Split = split ? split.Split : null;

现在setSplit将对象视为参数并直接设置它。

Codesandbox