时间戳

首页 > 解决方案 > 如何将 useState 设置器作为函数参数传递？

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

问题描述

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

应用程序.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;

卡片.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，知道为什么以及如何解决它吗？

标签： javascriptreactjs

解决方案

函数的两个参数而不是一个

使用代码框更新 :)

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

并改进条件（三元）运算符

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

推荐阅读