简单的React计数器不起作用，console.log useState变量也不能吗？

Question

I'm fairly new to React (only started learning a month ago) and I'm trying to get a simple counter to show on the page, but it only ever updates once. Also, whenever I console.log() useState variables, they're always empty, but since I added them to output on the page, I can see that they're updating, but I still can't console.log the values? What gives? I must be doing something wrong but I can't see to figure out why.

Here's a demo of the "problem" in a codesandbox .

this is the code:

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;

Thanks. I look forward to finding out my spectacular mistake :-)

Answer 1

When the next state is depended on the previous state you should pass a function updater as an argument to setState . So change to this:

setCount((count) => count + 1)

Answer 2

Duo to Javascript Closures , onNameChange scope closes upon count variable:

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>
  );
};