Как я могу изменить новый неизменяемый объект из nextState (статический getDerivedStateFromProps) - PullRequest
Новая
       71

Как я могу изменить новый неизменяемый объект из nextState (статический getDerivedStateFromProps)

0 голосов
/ 30 ноября 2018

У меня есть композиция с HOC в React.Обернутый компонент - это просто компонент с вводом (управляемый компонент), а Wrap - это компонент, который должен проверять контролируемый компонент и возвращать объект с ошибками. 

import React, { Component } from 'react';
    class Email extends Component {
        constructor(props){
        super(props)    
}

render(){   
        const { error, getDataFromHandelInput, getDataFromInputRepeat } = this.props;
        console.log(error)
    return(

        <section className="Email">
            <label> 
                <h3>Your email</h3>
                    <input 
                    type="text" 
                    placeholder="example@google.com" 
                    //email={user.email}
                    onChange={getDataFromHandelInput}
                    />
                    <p>{`Error ${error}`}</p>
                    </label>
                    <label> 
                        <text>Repeat email</text>
                        <input 
                        type="text"  
                        placeholder="example@google.com"
                        onChange={getDataFromInputRepeat}
                        />

                    </label>

        </section>
    )
    }

}
 Email.defaultProps = {error : false}
 export default Email;

, и у меня есть HOC, подобный этому 

import React, { Component } from 'react';
import Email from '../components/Email';
export const EmailHOC = (Email) =>{
    return class extends Component{
    constructor(props){

     super(props)
     this.getDataFromHandelInput= this.getDataFromHandelInput.bind(this);
     this.getDataFromInputRepeat = this.getDataFromInputRepeat.bind(this);

 }

  state={
      error: [],
      email : "",
      repeatEmail: ""
  }

    getDataFromHandelInput = (event, value) => { 
        const inputChangeValue = event.target.value.substr(0,20);
        if(inputChangeValue !== this.state.email){
            this.setState({
                email : inputChangeValue
            })
        }
    }

    getDataFromInputRepeat = (event, value) => {
        const inputRepeatChange = event.target.value.substr(0,20)
        if(inputRepeatChange !== this.state.repeatEmail){
            this.setState({
                repeatEmail : inputRepeatChange
            })
        }
    }

    static getDerivedStateFromProps(props, nextState, prevState) {
        const reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        console.log(props)
        //console.log(nextState.email);
        //console.log(nextState.repeatEmail);

        //const arrayWithErrors = prevState.error.filter(error => error !== "This field might be contain more than 6 symbols");
        //console.log(arrayWithErrors)
        const arrayWithErrors  = nextState.error;
        console.log(`NEXTSTATE ${arrayWithErrors}`)
        if((nextState.email.length < 6 )&&(prevState===[] || prevState !== "This field might be contain more than 6 symbols")){
            return nextState.error = nextState.error.concat("This field might be contain more than 6 symbols");

        }

        if(reg.test(nextState.email) === false){
            nextState.error = nextState.error.concat("Please, check your email");
        };
        if(reg.test(nextState.repeatEmail) === false){
            nextState.error = nextState.error.concat("Please, repeat right email");
        }
        return nextState.error
}

    render(){  

        const { user } = this.props;
        const { error } = this.state;
        //console.log("ERROR", error)
        return(

            <Email
            {...this.props}
            getDataFromHandelInput={this.getDataFromHandelInput}
            getDataFromInputRepeat={this.getDataFromInputRepeat}
            error={error}
            />

        )
    }
    }
 }
const EmailValidation = EmailHOC(Email);
export default EmailValidation;

У меня проблема с объектом с ошибками, потому что мне нужно только одно другое свойство (не много того же самого), и у меня нет мнения, как я могу отладить это

...