时间戳

首页 > 解决方案 > push() 删除以前的值

javascript - push() 删除以前的值

问题描述

我正在尝试将新值推送到数组中，但我得到的只是计算的最后一个值。我看过其他答案，但似乎无法弄清楚。感谢您的帮助，谢谢。

简介：单击开始时我设置了一个新日期，然后每次单击方形 div 时，都会计算前一个日期和当前日期之间的时间，差值 (diff) 是输出。我正在尝试使用 push() 将所有差异值保存到一个名为 diffArray 的数组中，但只有最后一个值被保存/输出。

function App() {
  const [startTime, setStartTime] = useState();
  const [diff, setDiff] = useState();
  const [gate, setGate] = useState(false);
  const [left, setLeft] = useState(Math.floor(Math.random() * 1000));
  const [top, setTop] = useState(Math.floor(Math.random() * 1000));
  let diffArray = [];

  const divStyle = {
    height: 20,
    width: 20,
    top: top,
    left: left,
    position: "absolute",
    backgroundColor: "brown"
  };
  

  const handleClick = () => {
    
    setDiff((Date.now() - startTime) + '/ms');
    if (diff !== undefined) {
    diffArray.push(diff);
  
  }
    
    setStartTime(Date.now());
    respawn();
    ArrayMsOutput(diffArray);
  }

  const startClick = () => {
    setGate(!gate);
    setStartTime(Date.now());
  }

  const respawn = (e) => {
    
    setLeft(Math.floor(Math.random() * 1000));
    setTop(Math.floor(Math.random() * 900));
    
  }

  const ArrayMsOutput = (e) => {
    return e;
  }

  return (
    <div className="App">
      <button onClick={startClick}>{gate ? 'Stop' : 'Start'}</button>
      <div>{gate && diff}</div>
      <div>{ArrayMsOutput()}</div>
      {gate && <div onClick={handleClick} style={divStyle}>
      </div>}
    </div>
  );
}

export default App;

标签： javascriptarraysreactjs

解决方案

const handleClick = () => {

setDiff((Date.now() - startTime) + '/ms');
if (diff !== undefined) {
  diffArray.push(diff);
 }
}

这不起作用，因为您的钩子将在函数结束后具有该值。你需要做：

const handleClick = () => {
    const newDiff = (Date.now() - startTime) + '/ms';

    setDiff(newDiff);
    if (newDiff !== undefined) {
      diffArray.push(newDiff);
    }
  }

然后，您的数组只有最新的值，因为您需要将其转换为 useState 挂钩： const [diffArray, setDiffArray] = useState([]) 。

完成后，将您的函数重构为：

const handleClick = () => {
    const newDiff = (Date.now() - startTime) + '/ms';

    setDiff(newDiff);
    if (newDiff !== undefined) {
      setDiffArray(oldArray => [...oldArray, newDiff])
    }
  }

推荐阅读