How can first setState and then run onSubmit function

Question

I have a object from another component and I want to add objects value to my Data but when I click on submit first time the console.log show empty And next time it's okay. How can I do setState first?

    const postForm = ({addPost}) => {

    const [formData, setFormData] = useState({
        title: '',
        description: '',
        options: {}
    });


    const {
        title,
        description,
        options
    } = formData;

    const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });


    const onSubmit = e => {
        e.preventDefault();
        const oto = { ...options, ...newOptions }

        // >>  first time Not Work
        setFormData({ ...formData, options: oto })
        console.log(formData.options)
    }

console.log outside of the onSubmit function. Its probably working. Set state is async — Brian Thompson, Dec 20 '19 at 17:58
Does this answer your question? [React hook useState not updating with onSubmit](https://stackoverflow.com/questions/55854831/react-hook-usestate-not-updating-with-onsubmit) — Brian Thompson, Dec 20 '19 at 17:59
or this one https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately — Brian Thompson, Dec 20 '19 at 18:06
useState won't trigger immediately because it is async and you are not listening to the change anywhere. You need to use the useEffect hook: https://reactjs.org/docs/hooks-effect.html — ruby_newbie, Dec 20 '19 at 18:07
It is a duplicate, i linked the wrong one the first time and now it wont let me correct it — Brian Thompson, Dec 20 '19 at 18:08

MaK · Accepted Answer · 2021-03-16T16:36:26.350

The problem was solved by using an submitState in useEffect. By specifying a condition in the useEffect

    const [startOnSubmit, changeOnSubmit] = useState(false)

    useEffect(() => {
        if (startOnSubmit) {
            addPost(formData);
            changeOnSubmit(false);
        }
    }, [formData, addPost, startOnSubmit, changeOnSubmit]);

    const onSubmit = e => {
        e.preventDefault();
        const oto = { ...options, ...newOptions }
        setFormData({
            ...formData,
            options: oto,
            category: selected === null ? '' : selected.id
        });
        changeOnSubmit(true)
    }

How can first setState and then run onSubmit function

1 Answers1

Linked