簡單的React計數器不起作用，console.log useState變量也不能嗎？

Question

我對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;

謝謝。 我期待發現我的壯觀錯誤:-)

Answer 1

當下一個狀態取決於上一個狀態時，您應該將函數更新程序作為參數傳遞給setState 。 因此更改為：

setCount((count) => count + 1)

Answer 2

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