React Hooks：带有 onClick 的 useState 仅在单击第二次按钮后更新？

Question

When I try to click on the button 'To/FROM selected units' the addtoproduction function is being called and data is being logged. It does not work the first time I do it however the second time it does.

I'm guessing useEffect would work because it is asynchronous, but I don't know how to write it or where to put it. Eventually this data will be posted to the back end of the server.

please help me getting this button to console log the correct values the first time it is clicked on.

Code:

 const [AddRemoveDatabaseChanges, setAddRemoveDatabaseChanges] = useState(null)
  const [AddRemoveDatabaseMode, setAddRemoveDatabaseMode] = useState('ADD')

 const addtoproduction =  () => {

    let databaseChanges = unitTestsData.map(tests => { 
    return {
      "unit_test_id": tests.unit_test_template_id,
      "databases": tests.databases
    }
  })
  setAddRemoveDatabaseChanges(databaseChanges)

  if(AddRemoveDatabaseChanges != null && AddRemoveDatabaseMode === 'ADD'){
   
    setAddRemoveDatabaseChanges(databaseChanges)
   
    console.log('added data', AddRemoveDatabaseChanges);

  } else if (AddRemoveDatabaseChanges != null && AddRemoveDatabaseMode === 'REMOVE') {
    setAddRemoveDatabaseChanges(databaseChanges)
    console.log('removed data', AddRemoveDatabaseChanges )

  }
  }

Button:

   <div style={{width: '100%'}}>
          <Button 
          text='TO/FROM SELECTED UNIT TESTS'
          onClick={addtoproduction}

           />
        </div>
        </div>

Answer 1

Since the state change is Async hence we should not use the state just after setting it. Instead use useEffect link this:-

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

This will console the updated state and you can use the state value here to implement any logic.

Answer 2

The problem is not about the button, it is calling the handler correctly, but your addtoproduction function should be rewritten. Set state functions are asynchronous, so you cannot use their result immediately after them. Here you call setAddRemoveDatabaseChanges and in the next line check for AddRemoveDatabaseChanges when it is not yet set into the state. As a result, it is not working as expected the first time, but the next time the state is already set and you see the console.log

Answer 3

I think this is what you are trying to achieve

const [AddRemoveDatabaseChanges, setAddRemoveDatabaseChanges] = useState(null)
  const [AddRemoveDatabaseMode, setAddRemoveDatabaseMode] = useState('ADD')

  useEffect(() => {
    if(AddRemoveDatabaseMode === 'ADD'){  
      console.log('added data', AddRemoveDatabaseChanges);
    } else if (AddRemoveDatabaseMode === 'REMOVE') {
      console.log('removed data', AddRemoveDatabaseChanges );
    }
  }, [AddRemoveDatabaseChanges, AddRemoveDatabaseMode]);

  const addtoproduction =  () => {
    let databaseChanges = unitTestsData.map(tests => { 
      return {
        "unit_test_id": tests.unit_test_template_id,
        "databases": tests.databases,
      }
    })
    setAddRemoveDatabaseChanges(databaseChanges);
    setAddRemoveDatabaseMode('ADD'); // Pass ADD/REMOVE depending on your call
  }