怎样才能先setState再运行onSubmit函数答案

【问题标题】：How can first setState and then run onSubmit function怎样才能先setState再运行onSubmit函数
【发布时间】：2020-04-13 05:17:42
【问题描述】：

我有一个来自另一个组件的对象，我想将对象值添加到我的数据中，但是当我第一次单击提交时，console.log 显示为空，下次就可以了。我怎么能先setState呢？

    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 在 onSubmit 函数之外。它可能工作。设置状态是异步的
这能回答你的问题吗？ React hook useState not updating with onSubmit
或者这个stackoverflow.com/questions/54069253/…
useState 不会立即触发，因为它是异步的，并且您没有在任何地方监听更改。你需要使用 useEffect 钩子：reactjs.org/docs/hooks-effect.html
它是重复的，我第一次链接错误的，现在它不会让我更正它

标签： javascript reactjs

【解决方案1】：

问题已通过在 useEffect 中使用 submitState 解决。通过在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)
    }

【讨论】：