我有一个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'
答案 0 :(得分: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