反应状态：状态值重置为初始值

Question

我正在使用 github 示例代码，但状态值似乎没有更新。我意识到 react setState 是异步工作的，但情况似乎并非如此。

在 handleTextAreaChange 中，我将状态设置为：

const handleTextAreaChange = (newTextAreaValue) => {
    //let temp = clone.cloneDeep(newTextAreaValue);
    setTextAreaValue(newTextAreaValue);
    console.log(" after handleTextAreaChange", textAreaValue);// outputs: test
    return;
};

textAreaValue 不会立即更新，考虑到 React 安排此类请求，这是可以理解的。

我有一个自定义按钮，它调用函数 TextFile() 并访问 textAreaValue。但是状态值仍然设置为初始状态。

const TextFile = (value) => {
        const element = document.createElement("a");
        console.log(textAreaValue);// outputs test
        const file = new Blob([textAreaValue], {
            type: "text/html",
        });

        element.href = URL.createObjectURL(file);
        element.download = "myFile.html";
        document.body.appendChild(element);
        element.click();
};

我非常感谢您对此的意见！

以下是完整的代码供参考：

import React, { useState } from "react";

import JoditEditor from "../../src/";
import clone from "lodash";
const From = () => {
    let lis1 = { 0: "First Name", 1: "Last Name" };
    const [config, setConfig] = useState({
        readonly: false,
        toolbar: true,
        extraButtons: [
            {
                name: "Name",
                icon: "fa fa-superscript",
                mode: 3,
                list: lis1,
                exec: function (temp, ref, e) {
                    if (e.control.args !== undefined) {
                        temp.selection.insertHTML("[" + e.control.args[1] + "]");
                    } else {
                        temp.selection.insertHTML("[" + e.control.list[1] + "]");
                    }
                },
            },
            {
                name: "Save to file",
                icon: "fa fa-superscript",
                mode: 3,
                exec: function (a, b, c, d) {
                    TextFile();
                },
            },
        ],
    });

    const [textAreaValue, setTextAreaValue] = useState("Test");

    const [inputValue, setInputValue] = useState("");

    const [spin, setSpin] = useState(1);

    const TextFile = () => {
        debugger;
        const element = document.createElement("a");
        console.log("inside writetotext", textAreaValue);
        const file = new Blob([textAreaValue], {
            type: "text/html",
        });
        element.href = URL.createObjectURL(file);
        element.download = "myFile.html";
        document.body.appendChild(element);
        element.click();
    };
    const toggleToolbar = () =>
        setConfig((config) => ({
            ...config,
            toolbar: !config.toolbar,
        }));

    const toggleReadOnly = () =>
        setConfig((config) => ({
            ...config,
            readonly: !config.readonly,
        }));

    const handleBlurAreaChange = (newtextAreaValue, event) => {
        console.log("handleBlurAreaChange", newtextAreaValue, event);
        console.log(" after handleBlurAreaChange", textAreaValue);
    };

    const handleTextAreaChange = (newTextAreaValue) => {
        //let temp = clone.cloneDeep(newTextAreaValue);
        setTextAreaValue(newTextAreaValue);
        console.log(" after handleTextAreaChange", textAreaValue);
        return;
    };

    const handleInputChange = (e) => {
        const { value } = e.target;
        setInputValue(() => value);
        handleTextAreaChange(value);
    };

    const handleSpin = () => setSpin((spin) => ++spin);

    return (
        <div>
            <JoditEditor
                config={config}
                onChange={handleTextAreaChange}
                onBlur={handleBlurAreaChange}
                value={textAreaValue}
            />

            <input
                onChange={handleInputChange}
                placeholder={"enter some text"}
                type={"text"}
                value={inputValue}
            />

            <button onClick={toggleReadOnly} type={"button"}>
                {"Toggle Read-Only"}
            </button>

            <button onClick={toggleToolbar} type={"button"}>
                {"Toggle Toolbar"}
            </button>

            <button type={"button"} onClick={handleSpin}>
                {`Spin ${spin}`}
            </button>
        </div>
    );
};

export default From;