用数组反应 useState 钩子

Question

I want make something like this.我想做这样的东西。

When user clicks button, then item should be appended to array.当用户单击按钮时，项目应附加到数组中。
If user again clicks the button again, then item should be removed from array.如果用户再次单击按钮，则应从数组中删除项目。

What is the easy way of doing this?这样做的简单方法是什么？


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

When I click the button initially it works as expected.当我最初单击该按钮时，它按预期工作。 After that, when I try to remove element from the array it shows a weird behaviour.之后，当我尝试从数组中删除元素时，它显示出一种奇怪的行为。 What's wrong?怎么了？

Answer 1

setState needs to copy prevState first, and then modify it. setState需要先复制prevState ，然后再修改。

You can do as the following:您可以执行以下操作：

 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>

用数组反应 useState 钩子

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-07-12 14:52:27

用数组反应 useState 钩子

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-07-12 14:52:27

解决方案1
0 已采纳 2020-07-12 14:52:27