無法使用自定義掛鈎更新 state 的值

Question

我創建了一個包含四種狀態的自定義鈎子。 然后我將該鈎子導入到兩個功能組件中。 然后我正在更新第二個組件中的 state 之一。 但 state 在第一個組件中沒有改變。

import React , {useState} from "react"

/** Custom hook component **/
const useApp = () => {
    const[millisec , setMillisec] = useState(0)
    const[sec , setSec] = useState(0)
    const[min , setMin] = useState(0)
    const[hr , setHr] = useState(0)

    return {millisec , setMillisec , sec , setSec , min , setMin , hr , setHr}
    
}

export default useApp;

/** 第一個 JS 文件 **/

import React from "react"
import useApp from "../App"
import Interact from "./Interact";

const Timer = () => {
    
    
    const {millisec  , sec  , min  , hr } = useApp();

    return(
        <>
             <div>{hr}</div>
            <div>{min}</div>
            <div>{sec}</div>
            <div>{millisec}</div>
            <Interact />
        </>
    )
}
export default Timer

/** 第二個 JS 文件 **/

import React from "react"
import useApp from "../App"


const Interact = () => {

    const {millisec , setMillisec , sec , setSec , min , setMin , hr , setHr} = useApp();

    const handleStart = () => {
        setMillisec(prev => prev +1)
        
    return(
        <>
        <button onClick = {handleStart}>Start</button>
        <p>{millisec}</p>
        </>
    )
}

export default Interact

我可以在 second.js 文件和自定義掛鈎文件中更改初始 state 值millisec ，但我想更改第一個 js 文件中millisec的值，因為當我單擊開始按鈕時 state 會更改

Answer 1

把它傳下來：

const Timer = () => {
    const { millisec, setMillisec, sec  , min  , hr} = useApp();

   const handleStart = () => {
       setMillisec(prev => prev + 1)
   }

    return(
        <>
             <div>{hr}</div>
            <div>{min}</div>
            <div>{sec}</div>
            <div>{millisec}</div>
            <Interact handleStart={handleStart} millisec={millisec} />
        </>
    )
}