如何提醒 React-JS 获取值

Posted 2023-03-31

【中文标题】如何提醒 React-JS 获取值

【英文标题】：How to alert React-JS fetch values

【发布时间】：2021-02-14 09:47:00

【问题描述】：

我有一个 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');
         )
    

【问题讨论】：

有什么问题？

可能语法错误？你应该这样写 Promise --> codesandbox.io/s/inspiring-forest-ymzf7?file=/src/App.js

当我按下提交按钮时，它说取消定义

【参考方案1】：

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

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

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

【讨论】：

您的代码中可能存在问题。在这里查看 Codesandbox - codesandbox.io/s/rough-flower-czk25?file=/src/App.js