Question

我有一个React Functional组件，该组件通过useState（）的变量接收一个prop。这工作正常，但如果我在EventListener中使用它，则不会更新。我尝试了以下方法，但仍然无法正常工作。

也许有人可以解释原因。

谢谢

我希望x是更新后的数字，但它始终具有EventHandler的初始设置值。

CREATE OR REPLACE FUNCTION public.generate_terrain (
  _inner integer,
  _outer integer
)
RETURNS integer AS
$body$
DECLARE
q integer = 0;
r integer = 0;
BEGIN
q := q - _outer;
r := r - _outer;

WHILE q <= _outer 
LOOP
    WHILE r <= _outer 
    LOOP
        -- This condition is to skip the inner square that is already
        -- present in the database.
        IF r > -_inner 
        AND r < _inner 
        AND q > -_inner 
        AND q < _inner THEN
            r := _inner;
        END IF;
        --insert into public.t_cell (coo_q, coo_r) values (q, r);
        RAISE NOTICE 'Cell %,%', q,r;
        r := r + 1;
    END LOOP;
    q := q + 1;
    r := - _outer;
END LOOP;
RETURN 1;
END;
$body$
LANGUAGE 'plpgsql'

Answer 1

Child的每个渲染都将获得一个新的x，一个新的props对象，等等。但是，您只将事件监听器绑定一次，因此仅捕获初始的{{ 1}}值。

两种修复方法：

在props.num发生更改时重新绑定事件侦听器，方法是传递num作为对事件绑定的依赖，以绑定事件侦听器：

num

或使用const Child = ({ num }) => { useEffect(() => { // no need to define this in main function since it is only // used inside this effect const md = () => { console.log(num); }; document.getElementById("box").addEventListener("mousedown", md); return () => { document.removeEventListener("mousedown", md); }; }, [num]); return <div id="box">click {num}</div>; };来保存num的值并将事件侦听器绑定到ref。这为您提供了一个间接级别来处理更改：

ref

如何在EventHandler中使用状态变量（useState）

1 个答案: