反应异步状态

Question

我对状态同步有问题。当我点击编辑器的外部（想要关闭它），我想把实际的文本传回给父节点（回调函数）。但是当我在queryText之外单击时，状态似乎总是落后一步。（例如：如果编辑器内部有abc，我键入d，CALLBACK： abc，我键入e，CALLBACK： abcd等等）。

如果我在编辑器外单击，将出现queryText的实际状态，如何实现这一点？

import React, {useEffect, useState} from "react";
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-mysql";
import "ace-builds/src-noconflict/theme-eclipse";
import "./SQLEditor.css"


function SQLEditor({queryTab, active, callback}) {
    const [queryText, setQueryText] = useState(queryTab[active].content)

    //Setting a onClickListener somewhere else
    //This function is getting called when I click outside of the Editor
    function handleClickOutside() {
            document.removeEventListener("mousedown", handleClickOutside);
            console.log("CALLBACK:" + queryText) //Problem here
            callback(active, {content: queryText})
            setInEditor(false)
        }
    }

    //Implementing useEffect for debugging

    useEffect(() => {
        console.log(queryText); //Here I'm getting the right one.
    }
    return (
            <AceEditor
                mode="mysql"
                theme="eclipse"
                name="blah2"
                onChange={(newValue) => {
                    setQueryText(newValue) //Seting text to new value
                    console.log(newValue) //Getting the correct updated value
                }}
                fontSize={16}
            />
        </div>
    )
}
export default SQLEditor;

Answer 1

我以前从未见过useEffect返回整个组件，我无法让您的代码在沙箱中运行。然而，前几天我也遇到了同样的问题，我的状态是同步的。我是这样处理的

1. 创建在单击时设置的useState钩子
2. 将状态添加到您的use效应依赖列表
3. 将单击操作移动到您的use效应方法

它可能看起来像这样

const [someVar, setSomeVar] = useState(null);

const handleClick = (e) => {
    setSomeVar(e.target.value); // or whatever
}

useEffect(() => {
    if (someVar != null) { // useEffect will get called on mount, so this logic is to ensure it will only get called if someVar is not equal to it's default value
        // implement handle click logic here
    }
}, [someVar]) // useEffect will get called each time someVar gets updated because we've added someVar to useEffect's dependencies

Answer 2

在下面添加useffect，

useEffect(() => {
    if(!inEditor){
        callback(active, {content: queryText});
        console.log(queryText);
    }
}, [inEditor, queryText])

并更新你的handleClickOut到，

function handleClickOutside() {
    document.removeEventListener("mousedown", handleClickOutside);
    setInEditor(false);
}