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

Question

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

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

控制台说：

undefined

第一次点击时：

-1611798597788milliseconds passed

（第二次点击时，它按照我的计划运行良好。很奇怪）

这是我的代码：

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

那是因为你的 startTime 状态在这里设置为 null:

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

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

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

Answer 2

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>
);
};

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

now.getTime() inside useEffect doesn't work

javascript

gettime

reactjs