为什么我的 setstate 函数在第一次调用时不起作用？

Question

有一个食品功能，其道具类型等于 'Lunch' 或 'Dinner' 我需要根据 type

上的条件单击提交时更改 LunchStatus 的值

const Food = (props) =>{
  const [LunchStatus, LunchUpdate] = useState('Lunch YES');
  const [DinnerStatus, DinnerUpdate] = useState('Dinner YES');
  
  function handlingSubmit(e){
    if(props.type === 'Lunch'){
      LunchUpdate('Lunch NO');
      console.log(LunchStatus);
    }
    else{
      DinnerUpdate('Dinner NO');
      console.log(DinnerStatus);
    }
  }
  return (
    <div className='food-box'>
      <button  class="button_raise" onClick={handlingSubmit}>Submit</button>
    </div>
  );
}

并且输出显示第一次点击是 Lunch YES 和 Dinner YES，其余点击显示 Lunch NO 和 Dinner NO

当我一个接一个地连续点击时，输出就像是

Lunch YES
Dinner YES
Lunch NO
Dinner NO
Lunch NO
Dinner NO

Answer 1

这种行为有几个原因：

: State is updated asynchronously.
: In any particular render, state and props don't change, changes are only reflected when the component re-renders.

const Food = (props) => {
  const [LunchStatus, LunchUpdate] = useState('Lunch YES');
  const [DinnerStatus, DinnerUpdate] = useState('Dinner YES');

  useEffect(() => {
    console.log(LunchStatus);
  }, [LunchStatus])

  useEffect(() => {
    console.log(DinnerStatus);
  }, [DinnerStatus])

  function handlingSubmit(e) {
    if (props.type === 'Lunch') {
      LunchUpdate('Lunch NO');
    }
    else {
      DinnerUpdate('Dinner NO');
    }
  }
  return (
    <div className='food-box'>
      <button class="button_raise" onClick={handlingSubmit}>Submit</button>
    </div>
  );
}

Answer 2

您的状态已更新。

只是你没有看到，因为状态是在那之后应用的。

    <div className='food-box'>
      <p>Lanch state: {{LunchStatus}}</>
      <p>Lanch state: {{DinnerStatus}}</>
      <button  class="button_raise" onClick={handlingSubmit}>Submit</button>
    </div>

或

const Food = (props) =>{
  const [LunchStatus, LunchUpdate] = useState('Lunch YES');
  const [DinnerStatus, DinnerUpdate] = useState('Dinner YES');
  
  function handlingSubmit(e){
    if(props.type === 'Lunch'){
      LunchUpdate('Lunch NO');
      
    }
    else{
      DinnerUpdate('Dinner NO');
     
    }
  }
  console.log(LunchStatus);
  console.log(DinnerStatus);
  return (
    <div className='food-box'>
      <button  class="button_raise" onClick={handlingSubmit}>Submit</button>
    </div>
  );
}

Answer 3

因为您没有在任何点击时更新 YES ，所以您只更新 NO 。只有当它用 useState('Dinner YES')

初始化时才会打印 YES

为什么我的 setstate 函数在第一次调用时不起作用？

why is my setstate function is not working for the first call?

javascript

jsx

setstate

reactjs

use-state