在所需单击之前按一下useState更新

Question

我正在创建50个按钮，单击这些按钮应该将useState值设置为当前按钮号(数组index+1)。但我意识到，我必须按两次按钮才能得到当前值(数组index+1)。第一次单击总是得到以前单击的按钮值。当我第一次点击按钮1，我什么也没有，当我点击按钮2，我得到1，当我点击按钮3，我得到2。谢谢。

这是代码

 const [theValue, setTheValue] = useState({first: 1});
 const [disableNext, setDisableNext] = useState(false);
 const [disablePrev, setDisablePrev] = useState(true);

             <div className="flex flex-row">
            {disablePrev ? <div className="flex flex-1 justify-start">
<button type="button" className="btn bg-gray-300 text-gray-400 m-10" disabled>Previous</button></div> 
: <div className="flex flex-1 justify-start">
<button type="button" className="btn bg-jamb-light-green text-white m-10 hover:bg-green-400" onClick={prevButton}>Previous</button></div>}
            
        {disableNext ? <div className="flex flex-1 justify-end">
<button type="button" className="btn bg-gray-300 text-gray-400 m-10" disabled>Next</button></div>
 : <div className="flex flex-1 justify-end">
<button type="button" className="btn bg-jamb-light-green text-white m-10 hover:bg-green-400" onClick={nextButton}>Next</button></div> }   
        </div>
<div>
            {[...Array(50)].map((item, index) => {
                return (
                        <button key={index}  className={(index+1 === theValue.first) ? "w-10 h-10 p-2 m-0.5 rounded-full bg-green-500 text-white" : "w-10 p-2 m-0.5 rounded-full bg-red-300 hover:bg-green-400 hover:text-white"}
                         onClick={
                            () => {
                             if(theValue.first === 1){
                             setDisablePrev(true);                                    
                             }else if((theValue.first > 1) && (theValue.first < 49)){
                             setDisablePrev(false);
                                                           }
                             if(theValue.first === 50){
                               setDisableNext(true);
                             }else if(theValue.first < 50 && theValue.first > 1){
                             setDisableNext(false);                                    
                             }
                             setTheValue({...theValue, first: index+1})
                        }
                    }>{index+1}</button>
                    
                )
            })}
        </div>

Answer 1

这是因为状态设置为下一个呈现。若要将状态更新为1，请执行以下操作：

 const [theValue, setTheValue] = useState({first: 1});


 <div>
   {[...Array(50)].map((item) =>(
         <button key={index} className={(index+1 === theValue.first) ? "w-10 h-10 p-2 m-0.5 rounded-full bg-green-500 text-white" : "w-10 p-2 m-0.5 rounded-full bg-red-300 hover:bg-green-400 hover:text-white"}
           onClick={
            () => {
              setTheValue(currentStateValue => {...currentStateValue, first: currentStateValue.first+1})
            }
         }>{index+1}</button>   
      )
  )}
 </div>

Answer 2

首先，在您的第二个if条件中有错误，theValue.firts。在处理您的问题时，当您在函数中更新状态时，更新后的状态在同一函数中无法立即访问。您只能访问前一个状态值。因此，假设当前的状态值是9，当您单击按钮编号10时，您将状态值更新为10，同时控制台记录theValue.first的值，该值目前仍然是9，因为它无法访问更新的10状态值。现在，如果再次单击相同的按钮号，它将显示10，但这并不意味着它是已更新的状态值，而是以前单击该按钮时设置的状态值(即10)。这就是那里发生的事。但是，正如我为下面的演示添加的那样，您将能够访问该段中呈现div中最新更新的状态值。按照您的问题，状态值将正确更新。只是来自同一个函数的控制台日志记录让您有不同的感觉。

​

const [theValue, setTheValue] = useState({
  first: 1
});


<div> {
    [...Array(50)].map((item, index) => {
      return ( <
        button key = {
          index
        }
        className = {
          (index + 1 === theValue.first) ? "w-10 h-10 p-2 m-0.5 rounded-full bg-green-500 text-white" : "w-10 p-2 m-0.5 rounded-full bg-red-300 hover:bg-green-400 hover:text-white"
        }
        onClick = {
          () => {
            if (theValue.first === 1) {
              console.log(theValue.first);

            } else if (theValue.first > 1) {

              console.log(theValue.first);
            }
            if (theValue.first === 50) {
              console.log(theValue.first);

            } else if (theValue.first < 50) {
              console.log(theValue.first);

            }
            setTheValue({ ...theValue,
              first: index + 1
            })
          }
        } > {
          index + 1
        } < /button>

      )
    })
  } 
  
  <p>{theValue.first}</p> // access to updated state value
  </div>

​