javascript - React 在状态更改之前运行代码

Question

我是 React 和 ES6 的新手，我有一个这样的组件：

import React, { useState } from 'react';

const Order = () => {
    let username='Test',password = 'secret';
    const [Data,setData]=useState({title:'',submit:false});
    const [List,setList]=useState({title:'',submit:false});
    const Clicked = ()=>{
        if(username==='Test'){
            setData({title:'Yes',submit:true});
        }
        else{
            setData({title:'No',submit:false});
        }
        if(password==='secret'){
            setList({title:'Yes',submit:true});
        }
        else{
            setList({title:'No',submit:false});
        }
        console.log(Data.submit,List.submit);
        if(Data.submit && List.submit){
            alert('Time to Submit')
        }
    }
    return (
        <div>
            <button onClick={Clicked}>Click</button>
        </div>
    );
}
 
export default Order;

我的问题是当我单击 Button 时，第一次单击时Data.submit和List.submit都被认为是 False ，但在第二次单击时它们都变为 true 并发出警报alert('Time to Submit')。因为我将数据和列表用于两个不同的按钮，所以我不能使用useEffect(). 我不希望用户单击两次。我该如何解决这个问题？

标签： javascriptreactjsecmascript-6

Answer 1

这主要是因为设置状态是异步的，因此如果您像同步代码一样调用它，它将无法按预期工作。

要解决此问题，您可以执行以下操作：

import React, { useState } from 'react';

const Order = () => {
    let username='Test',password = 'secret';
    const [Data,setData]=useState({title:'',submit:false});
    const [List,setList]=useState({title:'',submit:false});
    const Clicked = ()=>{
        const data = {title: '', submit: false};
        const list = {title: '', submit: false};

        if(username==='Test'){
            data.title = 'Yes';
            data.submit = true;
        }
        else{
            data.title = 'No';
            data.submit = false;
        }
        if(password==='secret'){
            list.title = 'Yes';
            list.submit = true;
        }
        else{
            list.title = 'No';
            list.submit = false;
        }
        console.log(Data.submit,List.submit);
        if(data.submit && list.submit){
            alert('Time to Submit')
        }
        setData(data);
        setList(list);
    }
    return (
        <div>
            <button onClick={Clicked}>Click</button>
        </div>
    );
}
 
export default Order;