JSX 不支持睡眠前的使用状态函数

Question

发布最小的可重现示例：

假设我有一个带有文本区域的简单网页，每当我单击按钮时，都会调用函数 handleUPClick。

在该函数中我设置了 2 秒的睡眠，虽然睡眠后的 settext 得到尊重，但睡眠函数之前的 setText("Converting to Upper case..."); 没有得到尊重。

我目前得到的：

console.log("Uppercase was clicked " + text); As soon as button is clicked
sleep of 2seconds
setText(text.toUpperCase() ); the text should be converted

预期结果：

console.log("Uppercase was clicked " + text); As soon as button is clicked
setText("Converting to Upper case..."); This should appear on screen
sleep of 2seconds 
setText(text.toUpperCase() ); the text should be converted

代码片段：

import React, {useState} from 'react'


export default function TextForm(props) {
    const handleUPClick = ()=>{
        console.log("Uppercase was clicked " + text);
        setText("Converting to Upper case...");
        function sleep(milliseconds) {
            const date = Date.now();
            let currentDate = null;
            do {
              currentDate = Date.now();
            } while (currentDate - date < milliseconds);
          }
        sleep(2000);
        
        setText(text.toUpperCase() );
    }
    const handleOnChange = (event)=>{
        console.log("Changed");
        setText(event.target.value);
    }
    const [text, setText] = useState('Enter text here'); //text is a state variable whose initial value is given and setText will be used to set text for the text variable
    return (
        <div>
            <h3>{props.heading}</h3>
            <div className="mb-3">
                <textarea className="form-control" value={text} onChange={handleOnChange} id="myBox" rows="8"></textarea>
             </div>
             <button className="btn btn-primary" onClick={handleUPClick}>Convert to Uppercase</button>
        </div>
    )
}

编辑： 可能有 100 种方法可以实现相同的目的，但我很想知道为什么这不起作用并且睡眠前的 settext 没有得到尊重？这是否与 JS 引擎的工作原理有关？如果是，那么是什么以及为什么？

Answer 1

尝试像这样重构 handleUPClick 函数：

const handleUPClick = async () => {
    console.log("Uppercase was clicked " + text);
    setText("Converting to Upper case...");

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    
    await sleep(2000);

    setText(text.toUpperCase());
};

JSX 不支持睡眠前的使用状态函数

JSX doesn't honor usestate function before sleep

javascript

html

reactjs

jsx

react-component