如何提醒 React-JS 获取值

Question

我有一个 Web API，它接受 3 个参数（例如：int EID、字符串 MUN、字符串 MUP），然后返回如下 JSON：

[
    {
        "MemberID": 71,
        "MemberExamID": 1
    }
]

现在我想在我的 React-JS 项目中提醒“MemberID”，当用户点击“提交”按钮时。 这也是我的 React-JS 代码的一部分：

export class LoginModal extends Component {
    constructor(props) {
        super(props);
        this.state = { MemberID: 0}
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
        event.preventDefault();
        fetch(process.env.REACT_APP_API + 'MemberExamValidation', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                EID: event.target.ExamID.value,
                MUN: event.target.EDT_Username.value,
                MUP: event.target.EDT_Password.value
            })
        })
        .then(res => res.json())
        .then(data => {
            this.setState({ MemberID: data.MemberID });
            alert(this.state.MemberID);
         },
         (error) => {
             alert('Erroe');
         })
    }

Answer 1

setState 函数是异步的，这意味着如果您在设置后立即尝试读取该值，它将无法按照您的方式工作。试试这个 -

this.setState({
  MemberID: data.MemberID,
}, () => {
  // read value here
  alert(this.state.MemberID)
});

在此处阅读有关 setState 回调的更多信息 - https://reactjs.org/docs/react-component.html#setstate