javascript - 无法使用自定义挂钩更新状态值
问题描述
我创建了一个包含四种状态的自定义钩子。然后我将该钩子导入到两个功能组件中。然后我正在更新第二个组件中的一个状态。但是第一个组件中的状态没有改变。
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 文件和自定义挂钩文件中的初始状态值millisec
,但我想更改millisec
第一个 js 文件中的值,因为当我单击“开始”按钮时状态会发生变化
解决方案
把它传下来:
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} />
</>
)
}
推荐阅读
- php - 通过 VBA 上传文件时收到 405 错误
- python - 为什么我会得到模棱两可的真相错误?
- ide - 如何通过 goormIde 的终端打开文件
- android - 我收到迟到的回复“职位”如何解决这个问题
- wordpress - 为什么 Wordpress 给我这个错误而不是我的网站?
- python - 如何在kivy中跟踪鼠标事件并为网格着色
- c++ - BN_CTX_free() vs BN_CTX_end() EXC_BAD_ACCESS 异常
- angular - 如何使用 Karma 和 Jasmine 在 Angular 6 中运行所有 spec.ts 文件?
- python - 从 Azure Databricks 集群中提取时,Pandas 将功能识别为对象 dtype
- python - 尝试用 Python 计算每十年的自杀人数