提问人：jason sure 提问时间：11/9/2023 最后编辑：VLAZjason sure 更新时间：11/9/2023 访问量：41
setDarkTheme 不是函数
setDarkTheme is not a function
问：
每当我单击应该在我的页面上应用darktheme的Dark按钮时，它通过此错误似乎错误在按钮的某个地方Click无法弄清楚。
App.js
import { useState } from 'react';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Routes from './components/Routes';
const App = () =>{
const [darkTheme, setDarkTheme] = useState(false);
return (
<div className={darkTheme ? 'dark' : ''}>
<div className="bg-gray-100 dark:bg-gray-900 dark:text-gray-200 min-h-screen">
<Navbar darkTheme={darkTheme} setDarkTheme={setDarkTheme}/>
<Routes/>
<Footer/>
</div>
</div>
)
}
export default App;
Navbar.js
import { Link } from 'react-router-dom';
import Search from './Search';
const Navbar = ({ darkTheme, setDarkTheme }) => {
return (
<div className="p-5 pb-0 flex flex-wrap sm:justify-between justify-center items-center border-b dark:border-gray-700 border-gray-200">
<div className="flex justify-between items-center space-x-5 w-screen">
<Link to="/">
<p className="text-2xl bg-blue-500 font-bold text-white py-1 px-2 rounded dark:bg-gray-white dark:text-gray-900">
Google
</p>
</Link>
<button
type="button"
onClick={() => setDarkTheme(!darkTheme)}
className="text-xl dark:bg-gray-50 dark:text-gray-900 bg-white border rounded-full px-2 py-1 hover:shadow-lg"
>{darkTheme ? 'Light' : 'Dark'}
</button>
</div>
<Search />
</div>
)
}
export default Navbar
错误信息： 未捕获的运行时错误： × 错误 setDarkTheme 不是函数 TypeError：setDarkTheme 不是函数 在 onClick （http://localhost:3000/static/js/bundle.js:223:24） 在 HTMLUnknownElement.callCallback （http://localhost:3000/static/js/bundle.js:14249:18） 在 Object.invokeGuardedCallbackDev （http://localhost:3000/static/js/bundle.js:14293:20） 在 invokeGuardedCallback （http://localhost:3000/static/js/bundle.js:14350:35） 在 invokeGuardedCallbackAndCatchFirstError （http://localhost:3000/static/js/bundle.js:14364:29） 在 executeDispatch （http://localhost:3000/static/js/bundle.js:18508:7） 在 processDispatchQueueItemsInOrder （http://localhost:3000/static/js/bundle.js:18534:11） 在 processDispatchQueue （http://localhost:3000/static/js/bundle.js:18545:9） 在 dispatchEventsForPlugins （http://localhost:3000/static/js/bundle.js:18554:7） 在 http://localhost:3000/static/js/bundle.js:18714:16
我不知道这是怎么回事
答：
0赞
Harry
11/9/2023
#1
如果提供代码沙箱，它将有很大帮助。
如果对您来说没问题，我们可以改变方法吗？此外，命名约定对于在浅色和深色主题之间切换也很有意义。
实现如下：（我们只是在 App 组件中移动 onClick 回调）
App.js
import { useState } from 'react';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Routes from './components/Routes';
const App = () =>{
const [darkTheme, setDarkTheme] = useState(false);
const toggleTheme = () => {
setDarkTheme(!darkTheme)
}
return (
<div className={darkTheme ? 'dark' : ''}>
<div className="bg-gray-100 dark:bg-gray-900 dark:text-gray-200 min-h-screen">
<Navbar darkTheme={darkTheme} toggleTheme={toggleTheme}/>
<Routes/>
<Footer/>
</div>
</div>
)
}
export default App;
Navbar.js
import { Link } from 'react-router-dom';
import Search from './Search';
const Navbar = ({ darkTheme, toggleTheme }) => {
return (
<div className="p-5 pb-0 flex flex-wrap sm:justify-between justify-center items-center border-b dark:border-gray-700 border-gray-200">
<div className="flex justify-between items-center space-x-5 w-screen">
<Link to="/">
<p className="text-2xl bg-blue-500 font-bold text-white py-1 px-2 rounded dark:bg-gray-white dark:text-gray-900">
Google
</p>
</Link>
<button
type="button"
onClick={() => toggleTheme()}
className="text-xl dark:bg-gray-50 dark:text-gray-900 bg-white border rounded-full px-2 py-1 hover:shadow-lg"
>{darkTheme ? 'Light' : 'Dark'}
</button>
</div>
<Search />
</div>
)
}
export default Navbar
评论