时间戳

首页 > 解决方案 > React-bootstrap 警报未重新渲染

javascript - React-bootstrap 警报未重新渲染

问题描述

我正在开发登录模块。我将nodeJs用于我的后端服务。

问题：我想在登录时出现任何错误时显示一条消息。

为此，我在服务器的每个登录请求上都向客户端发送一条消息。

  1. 当客户端用户名和密码正确时，服务器发送"OK"。

2.当密码错误时，服务器会发送“密码不匹配！” .

  1. 当电子邮件不正确时，服务器会发送“用户不在数据库中”。

反应代码：

状态

this.state={
            email:'',
            password:'',
            msg:''
        }

我有一个登录组件，它呈现所有输入控件和按钮。在登录组件中，我有一个提交按钮，输入控制电子邮件和密码。

当用户单击提交按钮时，我正在向服务器发出请求。

登录请求：

 axios.post('http://localhost:4000/signin',{
            email:this.state.email,
            password:this.state.password
        })
        .then(response=>{
            if(response.data.msg==='OK'){
                window.location.href='/';
            }else{
                this.setState({
                    msg:response.data.msg
                })
                //alert(response.data.msg);
            }
        })
        .catch(err=>console.log(err));

服务器的一切都很好。每次登录失败时，我都会从服务器收到消息。

我正在渲染一个 Message ( <Message show={true} msg={this.state.msg}/>) 组件并将 show={true} 和 msg={this.state.msg} 作为道具传递。

消息组件

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Alert from 'react-bootstrap/Alert';

export default class Message extends React.Component{
    constructor(props){
        super(props);
        this.state={
            show:false
        }
    }
      componentDidMount(){
        this.setState({show:this.props.show})
      }

    handleClose=()=>{
        this.setState({
            show:false
        })
    }
    render(){
        if(this.props.msg.length<4){
        return (<p></p>);
        }
           

        return(
            <div>
                <Alert variant='danger' show={this.state.show} onClose={this.handleClose} dismissible>
                    <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
                    <p>
                        {this.props.msg}
                    </p>
                </Alert>
            </div>
        )
    }
}

当消息长度小于 4 时，我将返回一个空元素。这确保了当我们最初进入登录页面或登录成功时，消息组件不会呈现。

主要问题：

我进入登录页面并输入了错误的电子邮件，然后我得到了这个页面。

问题图片

当我单击模型内的关闭按钮时，它会按预期关闭。但是，问题是，当我再次输入错误的用户名或密码时，我没有收到Alert。

标签： javascriptreactjsreact-bootstrap

解决方案

由于 display 的状态是通过 props 传递的，因此只有在该组件挂载时才会变为 true，因为您在函数 componentDidMount 中有状态更改，并且只会执行一次。为此，您需要使用 componentDidUpdate() 函数。

您应该考虑到使用 componentDidUpdate 有点棘手，因为它会在每次组件更新时执行，您可以轻松创建无限循环，这就是您必须有停止条件的原因。就像是：

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      show: false
    }
  }

  componentDidUpdate() {
    //Only update the state when the current value is different than the incoming value
    if(this.state.show != this.props.show) {
      this.setState({ show: this.props.show })
    }
  }

  ...
}

更新：添加功能组件版本

对于这种情况，我们可以使用useEffect当依赖数组中的任何变量发生变化时调用效果的钩子。

const MyFunctionalComponent = ({ show }) => { //destructuring show prop
  const [showAlert, setShowAlert] = useState(false); //our state variable  

  useEffect(() => {
    if(showAlert != show) { //only update when values are different
      setShowAlert(show); //update the state
    }
  }, [show]);

  ...
}

推荐阅读