[英]Am trying out react with a simple counter. Within the console.log it works perfectly but within the user interface it doesn't update the counter
[英]Simple React counter not working, also can't console.log useState variables?
我对React还是比较陌生(一个月前才开始学习),并且试图在页面上显示一个简单的计数器,但它只会更新一次。 另外,每当我console.log()
状态变量时,它们始终为空,但是由于我将它们添加到页面上的输出中,因此我可以看到它们正在更新,但是仍然无法console.log这些值? 是什么赋予了? 我一定做错了,但看不出原因。
这是codesandbox中的“问题”的演示 。
这是代码:
import React, { useState } from "react";
import "jqwidgets-scripts/jqwidgets/styles/jqx.base.css";
import JqxInput from "jqwidgets-scripts/jqwidgets-react-tsx/jqxinput";
const MyForm2: React.FC = () => {
const [count, setCount] = useState(0);
const [email, setEmail] = useState("");
const [name, setName] = useState("");
const onEmailChange = (e?: any) => {
setCount(count + 1);
setEmail(e.args.value);
console.log('You typed: ' + e.args.value);
console.log("name: " + name + ", email: " + email);
};
const onNameChange = (e?: any) => {
setCount(count + 1);
setName(e.args.value);
};
return (
<div>
Name:{" "}
<JqxInput value={name} onChange={(e: any) => setName(e.args.value)} />
Email: <JqxInput value={email} onChange={onEmailChange} />
<p>Count: {count}</p>
<p>email: {email}</p>
<p>name: {name}</p>
</div>
);
};
export default MyForm2;
谢谢。 我期待发现我的壮观错误:-)
当下一个状态取决于上一个状态时,您应该将函数更新程序作为参数传递给setState
。 因此更改为:
setCount((count) => count + 1)
onNameChange
关闭Java语言 , onNameChange
范围根据count
变量关闭:
const MyForm2: React.FC = () => {
const [count, setCount] = useState(0);
const [email, setEmail] = useState('');
const [name, setName] = useState('');
const onEmailChange = (e?: any) => {
setCount(prev => prev + 1); // <-- no closure, use previous state
// Render as expected.
setEmail(e.args.value);
};
const onNameChange = (e?: any) => {
setCount(count + 1); // <-- `count` always 0;
// Will always redner the value '1'.
setName(e.args.value);
};
return (
<div>
Name: <JqxInput value={name} onChange={onNameChange} />
Email: <JqxInput value={email} onChange={onEmailChange} />
<p>Count: {count}</p>
</div>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.