Question

我想记录用户点击按钮之前经过的时间。我的计划是这样的：（用户进入页面的时间）-（用户点击按钮的时间）=经过了多少毫秒！

但是我的代码有一个错误和错误。我的 useEffect 没有达到我想要的效果.. 没有记住用户进入页面的时间。

控制台说：

<块引用>

?未定义

当第一次点击时：

<块引用>

-1611798597788 毫秒过去了

（第二次命中时它按照我的计划运行得很好。奇怪的?）

这是我的代码：

const UserTimer = () => {
  const [startTime, setStartTime] = useState(null);
  const [endTime, setEndTime] = useState(0);
  const [diff, setDiff] = useState(0);

  useEffect(() => {
    let now = new Date();
    setStartTime(now.getTime());
    console.log('?' + startTime);
  }, []);

  const onClick = () => {
    setEndTime(Date.now());
    setDiff(endTime - startTime);
    setStartTime(endTime);
  };

  return (
    <div>
      <p>{diff}milliseconds passed</p>
      <button onClick={onClick}>click here</button>
    </div>
  );
};

先谢谢你。

Answer 1

setState 不会同步发生，因此您不会立即看到它发生变化。最好设置一个变量，然后将该变量用于您的数学运算。

也许是这样？

const UserTimer = () => {
const [startTime, setStartTime] = React.useState(null);
const [diff, setDiff] = React.useState(0);

React.useEffect(() => {
  const now = Date.now()
  setStartTime(Date.now());
  console.log('?' + now);
}, []);

const onClick = () => {
  const endTime = Date.now()
  setDiff(endTime - startTime);
  setStartTime(endTime);
};

return (
  <div>
    <p>{diff}milliseconds passed</p>
    <button onClick={onClick}>click here</button>
  </div>
);
};

Answer 2

那是因为您的 startTime 状态在这里设置为 null：

const [startTime, setStartTime] = useState(null);

所以第一次点击它仍然是 null，所以你的 setDiff(endTime - startTime); 返回负数。您可以尝试使用以下方法解决：

useEffect(() => {
   let now = new Date();
   setStartTime(now.getTime());
   console.log('?' + startTime);
}, [startTime]);

useEffect 中的 now.getTime() 不起作用

2 个答案: