如何将useState设置器作为函数参数传递？

Question

我有一个代码，在按钮点击时在深色主题和浅色主题之间切换，如下所示：

App.js：

import React, { useState } from "react";
import Card from "./Card";
import { ChangeTheme } from "./functions/ChangeTheme";

export default function App() {
  const [theme, setTheme] = useState("dark-theme");

  const changeTheme = (theme) => {
    return theme === "dark-theme" ? setTheme("") : setTheme("dark-theme");
  };

  return (
    <div className="App">
      <Card theme={theme} changeTheme={() => ChangeTheme(theme)} />
    </div>
  );
}

Card.js：

import React from "react";
import "./Card.scss";

const Card = ({ theme, changeTheme }) => {
  return (
    <>
      <div className={theme}>Card title</div>
      <button onClick={changeTheme}>Click me</button>
    </>
  );
};

export default Card;

Card.scss：

.dark-theme {
  color: green;
}

上面的代码运行良好。此处的工作示例：https://codesandbox.io/s/zealous-water-y1j0o

现在，我想将changeTheme提取到一个单独的函数中。我尝试将theme和setTheme作为参数传递给ChangeTheme

ChangeTheme.js

export const ChangeTheme = ({ theme, setTheme }) => {
  return theme === "dark-theme" ? setTheme("") : setTheme("dark-theme");
};

并像这样在App.js中使用它：

import React, { useState } from "react";
import Card from "./Card";
import { ChangeTheme } from "./functions/ChangeTheme";

export default function App() {
  const [theme, setTheme] = useState("dark-theme");

  return (
    <div className="App">
      <Card theme={theme} changeTheme={() => ChangeTheme(theme, setTheme)} />
    </div>
  );
}

我得到了一个错误：setTheme is not a function，你知道为什么和如何解决它吗？

Answer 1

函数有两个参数，而不是一个

使用codesandbox更新:)

https://codesandbox.io/s/holy-thunder-tbgd6

并改进了条件(三元)运算符

export const changeTheme = (theme, setTheme) => {
  setTheme(theme === "dark-theme" ? "" : "dark-theme");
};

Answer 2

您需要在App.js中将参数作为对象键传递

// Lacks {}
ChangeTheme(theme, setTheme)

// Change to:
ChangeTheme({theme, setTheme})

因此，App组件变成：

export default function App() {
  const [theme, setTheme] = useState("dark-theme");

  return (
    <div className="App">
      <Card theme={theme} changeTheme={() => ChangeTheme({theme, setTheme})} />
    </div>
  );
}