如何使用/不使用 useEffect 钩子在 React JS 函数中获取更改的（新）状态值？
Posted
技术标签:
【中文标题】如何使用/不使用 useEffect 钩子在 React JS 函数中获取更改的（新）状态值？【英文标题】：How to get the changed (new) state value in React JS function with / without useEffect hook? 【发布时间】：2021-10-09 12:36:33 【问题描述】：我只想在特定范围内动态更新源和目标的字体大小（这里的范围应该在 12 - 18 之间）。它正在工作，但更新/更改的值不会反映下一次函数调用。我知道我们可以使用 useEffect 挂钩来使其反映某些情况，但在这种情况下，我不确定 useEffect 挂钩是否有用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React JS</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.development.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-datetime/3.0.0/react-datetime.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/react-datetime/3.0.0/css/react-datetime.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/css/uikit.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script type="text/babel">
const useState = React
const Editor = (props) =>
const [sourceLanguageFontSize, setSourceLanguageFontSize] = useState(15)
const [targetLanguageFontSize, setTargetLanguageFontSize] = useState(15)
const [allowedMinFontSize, allowedMaxFontSize] = [12, 18]
const changeFontSize = (stateVal, setFunction, action = '+') =>
console.log(parseInt(stateVal)) //Here it prints old value
if (parseInt(stateVal) >= allowedMinFontSize && parseInt(stateVal) <= allowedMaxFontSize)
let currentFontSize = parseInt(stateVal)
if (action == '+')
setFunction(prevState => prevState + 1)
else if (action == '-')
setFunction(prevState => prevState - 1)
return(
<span onClick=e => changeFontSize(sourceLanguageFontSize, setSourceLanguageFontSize, '+') >Increase Source</span>
)
ReactDOM.render(<Editor />,document.getElementById("root"))
</script>
</body>
</html>【问题讨论】：
显然它会注销 current（或 old）状态值，因为这是您在 点击时传入的值我>：changeFontSize(sourceLanguageFontSize, ...)。鉴于此，对于如此简单的任务，您的代码过于复杂？您是否考虑过简单地定义两个回调来增加和减少值？例如：const decrease = () => setSourceLanguageFontSize(current => current > allowedMinFontSize ? current - 1 : current);
我只是让它变得简单。实际上它具有也将被更新的目标值。所以我在那个函数中使用了三个参数
我没关注，抱歉？！
好的，感谢您的宝贵时间
【参考方案1】：
应该像这样工作
function editor (props)
const [count, setCount] = useState(15)
const [sourceLanguageFontSize, setSourceLanguageFontSize] = useState(15)
const [targetLanguageFontSize, setTargetLanguageFontSize] = useState(15)
const [allowedMinFontSize, allowedMaxFontSize] = [12, 18]
const changeFontSize = (action = '+') =>
console.log(parseInt(sourceLanguageFontSize)) //Here it prints old value
if (parseInt(sourceLanguageFontSize) >= allowedMinFontSize && parseInt(sourceLanguageFontSize) <= allowedMaxFontSize)
let currentFontSize = parseInt(sourceLanguageFontSize)
if (action == '+')
setSourceLanguageFontSize(prevState => prevState + 1)
else if (action == '-')
setSourceLanguageFontSize(prevState => prevState - 1)
return(
<span onClick=e => changeFontSize('+') >Increase Source</span>
)
【讨论】：
能否根据更新后的问题代码更改答案代码？ 实际上我也需要更新目标字体大小，这就是我传递三个参数的原因。保持原样并更新答案 那我不明白你想达到什么目的。你也想更新targetLanguageFontSize ？以上是关于如何使用/不使用 useEffect 钩子在 React JS 函数中获取更改的（新）状态值？的主要内容，如果未能解决你的问题，请参考以下文章
为啥 useState 钩子在 useEffect() 中使用循环时不更新
使用 Jest 和酶时如何在 React.useEffect 钩子上获得线路覆盖？