时间戳

首页 > 解决方案 > 用数组反应 useState 钩子

reactjs - 用数组反应 useState 钩子

问题描述

我想做这样的东西。

这样做的简单方法是什么？


  const [state, setState] = useState([])
  const [remove, setRemove] = useState(false)

  const handleClick = e => {
    if(!remove) {
      setRemove(true)
      setState(prev => [Date.now()])
    }else{
      setState(prev => prev.pop())
    }
  }


  return(
    <div>
    {JSON.stringify(state)}
      <button onClick={handleClick}>Click</button>
    </div>
  )
}

当我最初单击按钮时，它按预期工作。之后，当我尝试从数组中删除元素时，它显示出一种奇怪的行为。怎么了？

标签： reactjs

解决方案

setState需要先复制prevState，再修改。

您可以执行以下操作：

const {useState} = React;
const Root = () => {
  const [state, setState] = useState([]);
  const [remove, setRemove] = useState(false);

  const handleClick = e => {
    if(!remove) {
      setRemove(true);
      setState(prev => [Date.now()]);
    }else{
      const newState = [...state];
      newState.pop();
      setState(newState);
      setRemove(false);
    }
  }


  return(
    <div>
      {JSON.stringify(state)}
      <button onClick={handleClick}>Click</button>
    </div>
  )
}


class App extends React.Component {
  render() {
    return (
      <Root />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<html>

<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

</body>

</html>

推荐阅读