当我尝试将函数从页面发送到组件时，Next js 给我一个错误

Question

我正在创建一个番茄应用程序并尝试将函数从 page.tsx 发送到 timer.tsx 但我在调用时没有收到函数错误我尝试在网上寻找解决方案但无济于事，它说存在类型错误：SwitchStage不是一个函数，与 gettickingtime 相同

"use client";
import React, { useRef, useState } from 'react'
import Navbar from './components/Navbar'
import Timer from './components/Timer'

// import Herosection from './components/Herosection'
// import Skills from './components/Skills'
// import Projects from './components/Projects'

function page() {

  const [pomodoro,setpomodoro]=useState(25);
  const [shortbrk,setshortbrk]=useState(5);
  const [longbrk,setlongbrk]=useState(10);
  const [seconds, setSecond] = useState(0);
    const [consumedSecond, setConsumedSecond] = useState(0);
    const [ticking, setTicking] = useState(false);
    const [isTimeUp, setIsTimeUp] = useState(false);
    const [openSetting, setOpenSetting] = useState(false);
  const [stage,setstage]=useState(0);

  const alarmRef = useRef();
    const pomodoroRef = useRef();
    const shortBreakRef = useRef();
    const longBreakRef = useRef();

  const SwitchStage = (Index)=>
    {
      setstage(Index)
    };

    const getTickingTime = () => {
      const timeStage = {
        0: pomodoro,
        1: shortbrk,
        2: longbrk,
      };
      return timeStage[stage];
    };
  return (
    <div className='min-h-screen bg-black'>
      <div className='max-w-7xl mx-auto p-5'>
        <Navbar/>
        <Timer 
        SwitchStage={SwitchStage} 
        getTickingTime={getTickingTime}/>
      </div>
      
    </div>
  )
}

export default page

页.tsx^^

import { ButtonsCard } from '@/components/ui/moveupbtn'
import React from 'react'

function Timer(SwitchStage,getTickingTime) {
  const options=["POMODORO","SHORT BREAK","LONG BREAK"]
  return (
    <div className='min-h-screen flex-col lg:flex-row gap-10 lg:gap-0 justify-between items-center mt-20 md:mt-10 '>
      <div>
        <div className='min-w-xl mx-auto flex justify-center items-center gap-10'>
          {
            options.map((Option,idx)=>{
              {
                return(
                <div className=' flex items-center  text-sm md:text-base '>
                    <h1 key={idx} className={'hover:underline underline-offset-8 bg-opacity-20 transition-all duration-100 ease-in-out decoration-indigo-500 cursor-pointer' } onClick={()=> SwitchStage(idx)}>
                      {Option}
                      </h1>
                </div>)
              }
            })
          }
        </div>
        
      </div>
      <div className='mt-10 mb-10 justify-center items-center flex min-h-[50vh]'>
            <h1 className='font-bold m-0 text-9xl'>
            {()=>getTickingTime()}:00
            </h1>
      </div>
      <div className='flex justify-center items-center'>
        {/* <button className='px-5 py-5 text-2xl rounded-full hover:bg-gray-800 bg-opacity-30 hover:scale-105 transition-all ease-in-out'>START</button> */}
        <button className="shadow-[inset_0_0_0_2px_#616467] px-12 py-4 rounded-full tracking-widest uppercase font-bold bg-transparent hover:bg-[#616467] hover:text-white dark:text-neutral-200 transition duration-200">
          STARt
        </button>
      </div>
    </div>
  )
}

export default Timer
 

定时器.tsx

我尝试在网上寻找解决方案，但找不到任何

Answer 1

需要对

timer.tsx

进行一些更改，如下所示：

import { ButtonsCard } from '@/components/ui/moveupbtn'
import React from 'react'

function Timer({ SwitchStage, getTickingTime }) {
  const options=["POMODORO","SHORT BREAK","LONG BREAK"]
  return (
    <div className='min-h-screen flex-col lg:flex-row gap-10 lg:gap-0 justify-between items-center mt-20 md:mt-10 '>
      <div>
        <div className='min-w-xl mx-auto flex justify-center items-center gap-10'>
          {
            options.map((Option,idx)=>{
              {
                return(
                <div className=' flex items-center  text-sm md:text-base '>
                    <h1 key={idx} className={'hover:underline underline-offset-8 bg-opacity-20 transition-all duration-100 ease-in-out decoration-indigo-500 cursor-pointer' } onClick={()=> SwitchStage(idx)}>
                      {Option}
                      </h1>
                </div>)
              }
            })
          }
        </div>
        
      </div>
      <div className='mt-10 mb-10 justify-center items-center flex min-h-[50vh]'>
            <h1 className='font-bold m-0 text-9xl'>
            {()=>getTickingTime()}:00
            </h1>
      </div>
      <div className='flex justify-center items-center'>
        {/* <button className='px-5 py-5 text-2xl rounded-full hover:bg-gray-800 bg-opacity-30 hover:scale-105 transition-all ease-in-out'>START</button> */}
        <button className="shadow-[inset_0_0_0_2px_#616467] px-12 py-4 rounded-full tracking-widest uppercase font-bold bg-transparent hover:bg-[#616467] hover:text-white dark:text-neutral-200 transition duration-200">
          STARt
        </button>
      </div>
    </div>
  )
}

export default Timer

变化：

• 需要传播道具（使用 '{ }' ）

建议：

• 最好使用

  camelCase

  而不是

  PascalCase

  来命名变量或函数。