Показывать предупреждение другому компоненту реакции после успешного вызова API из текущего компонента - PullRequest
Новая
       70

Показывать предупреждение другому компоненту реакции после успешного вызова API из текущего компонента

0 голосов
/ 09 июля 2020

У меня есть компонент Tenant, который отвечает за перечисление всех деталей арендатора, например: имя, телефон, аренда и т. Д. c, и у меня есть компонент AddTenant, который содержит форму, которая используется для создания нового арендатора.

В моем компоненте AddTenant я делаю вызов api для хранения новой информации о клиенте в базе данных, после успешного вызова api я хочу перенаправить на компонент Tenant и хочу показать предупреждение (это предупреждающее сообщение должно отображаться при условии)

Пока я могу выполнить вызов api и могу перенаправить на компонент Tenant с помощью компонента перенаправления реагирующего маршрутизатора, но не могу показать предупреждающее сообщение при условии

Компонент клиента 

export default class Tenant extends React.Component {
    constructor(){
        super();
        this.state = {
            tenantList:[],
        }
    }

    componentDidMount(){
        
        axios.get("http://127.0.0.1:8000/api/tenants").then(response => {
            this.setState({
              tenantList: [...response.data.tenants]
            })

          })
      
    }

    render() {
        const {tenantList} = this.state

        // show alert on conditon
        var alert = ''
        if(this.props.location.state!==undefined){
            alert = <div class="alert alert-success" role="alert">
                        Success       
                    </div>
            const {location,history} = this.props;
            history.replace()
        }
        
      return (
        <div>
          {/** show alert here*/}
        </div>
          
      );
    }
}

Компонент AddTenant 

export default class AddTenant extends React.Component {
    constructor(props) {
        super(props);
        this.state ={
            startDate: moment(),
            nameInput: '',
            nidInput:'',
            nid_img:'',
            phoneInput:'',
            rentInput:'',
            hridInput:'',
            nameError: '',
            nidError:'',
            phoneError:'',
            rentError:'',
            hridError:'',
            errors:'',
            msg:'',
            redirect:false
        }
    }

    handleDateChange = (date)=>{
        this.setState({
            startDate: date
          })
        
    }
    handleFieldChange = (e)=>{ 
        this.setState({
            [e.target.name] : e.target.value
        })
        
    }
    handleDropDownMenu = (hridInput)=>{
        this.setState({ hridInput });
        console.log(`Option selected:`, hridInput);
    }

    validate = ()=>{
        let flag = true;
        let nameError = ""
        let hridError = ""

        if(!this.state.nameInput.includes(' ')){
            nameError = "Full name should contain a space"
            this.setState({nameError})
            flag = false
        }
        
        if(this.state.hridInput.value === undefined){
            hridError = "please select a house/room number"
            this.setState({hridError})
            flag = false
        }

        //datepicker validation is not done

        return flag

    }
    

    handleFormSubmit = (e)=>{
        e.preventDefault();
        
        let isValid = this.validate()

        if(isValid){
            console.log("form valid")
            const tenant = {
                name: this.state.nameInput,
                nid:this.state.nidInput,
                phone:this.state.phoneInput,
                exp_rent: this.state.rentInput,
                reg_date:moment(this.state.startDate).format("YYYY-MM-DD"),
                hrid:this.state.hridInput.value
            }
            //below line is commented because to test redirect component
            //console.log(tenant)
            // axios.post('http://127.0.0.1:8000/api/tenants', tenant)
            // .then(response => {
            //     // redirect to the homepage
            //     this.setState({redirect:true,msg:'success'})
            //     console.log(response);
                
            // })
            // .catch(error => {
            //     this.setState({
            //     errors: error.response.data.errors,msg:'failed'
            //     })
            // })
            this.setState({redirect:true,msg:'success'})
            this.setState({nameError:'',hridError:''})
        }
    }

    render() {
        if(this.state.redirect){
            return <Redirect to={{
                pathname: "/tenant",
                state : {msg:this.state.msg}
            }}/>
        }
      return (
        <div>
            <AddTenantForm />
        </div>
      );
    }
}

1 Ответ

0 голосов
/ 09 июля 2020

Вы можете передавать параметры с перенаправлением. 

render() {
    if(this.state.redirect){
        return <Redirect to={{
            pathname: "/tenant",
            state : {msg:this.state.msg, yourCondition : 
                     this.state.yourCondition}
        }}/>
    }

И обновлять состояние yourCondition при обновлении state.redirect: 

this.setState({redirect:true,msg:'success'})
this.setState({nameError:'',hridError:''})
this.setState({yourCondition : yourCondition)

В компоненте Tenants: 

    // show alert on conditon
    var alert = ''
    if(this.props.location.state!==undefined){
        if(this.props.location.yourCondition) {
           alert = <div class="alert alert-success" role="alert">
                    Success       
                   </div>
           const {location,history} = this.props;
           history.replace()
        }
    }
...