javascript - How to pass a function to SetState callback after updating? (Reactjs) - Stack Overflow

admin管理员组

文章数量:1302401

I searched a lot before asking but can't seem to find a solution that works with me.

I have a function that I need to be called after the state is set to the new value.

const onClickCallback = () => {
    setState(..., setCallback())
}

const setCallback = () => {
    console.log(State) // this prints the old State value
    if(State === something){
        ....
    }
}

Eventhough the function is being called as the setState callback, it still gets the older value.

I'm not sure if the problem is from my end or it's just not possible..

I searched a lot before asking but can't seem to find a solution that works with me.

I have a function that I need to be called after the state is set to the new value.

const onClickCallback = () => {
    setState(..., setCallback())
}

const setCallback = () => {
    console.log(State) // this prints the old State value
    if(State === something){
        ....
    }
}

Eventhough the function is being called as the setState callback, it still gets the older value.

I'm not sure if the problem is from my end or it's just not possible..

• javascript
• reactjs
• react-hooks
• use-state

Share Follow edited Sep 29, 2021 at 23:59 Drew Reese 203k1818 gold badges239239 silver badges271271 bronze badges asked Sep 29, 2021 at 23:43 EtchEtch 49211 gold badge33 silver badges1313 bronze badges 2

• 1 You're immediately invoking the setCallback with the (). Try just passing the function name setState(..., setCallback) – Matt U Commented Sep 29, 2021 at 23:48
• 1 I tried that but didn't work, I'm not sure either why they closed it but fortunately someone answered it. – Etch Commented Sep 30, 2021 at 0:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Unlike class ponent's this.setState, function ponent's useState state updater function doesn't take a second callback argument to be called after any state update.

What you are doing is enqueueing a state update and passing extraneous arguments, one of which is a function that you are immediately invoking, and passing any return value to setState, which will be ignored.

setState(..., setCallback()) // setCallback invoked and result passed

Use an useEffect hook with a dependency on the state to log any state updates.

const onClickCallback = () => {
  setState(...);
};

React.useEffect(() => {
  console.log(State) // this prints the updated state value
  if(state === something){
      ....
  }
}, [state, /* add other dependencies here */]);

useEffect with dependency array acts as an equivalent to ponentDidMount and ponentDidUpdate. It's the ponentDidUpdate lifecycle being used above to "react" to the state update and trigger a side-effect.

First

This matter has nothing to do with React, your approach would have caused the setCallback() function to be executed first.

I edit your code and demo result :

  const onClickCallback = () => {
    // Here will run setCallback function before setState function.
    setState('...', setCallback())
  }

  const setCallback = () => {
    console.info('run setCallback')
  }

  const setState = () => {
    console.info('run setState')
  }

  onClickCallback()

Second

Answer your question, you can use useEffect to achieve your goals.

Simple example:

const {useState, useEffect} = React;

const DemoComponent = (props) => {
  
  const [state, setState] = useState('initialState')

  useEffect(() => {
    if (state === 'something') {
      console.info('state:' + state)
    }
  }, [state])

  const onClickCallback = () => {
    setState('something')
  }

  return (
  <div>
    <button onClick={onClickCallback}>Click</button>
  </div>
  );
}

ReactDOM.render(
  <DemoComponent />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

本文标签： javascriptHow to pass a function to SetState callback after updating (Reactjs)Stack Overflow