Reactjs 捕获条件中错误的新状态时出现的问题_Reactjs

Reactjs 捕获条件中错误的新状态时出现的问题

reactjs

Reactjs 捕获条件中错误的新状态时出现的问题,reactjs,Reactjs,晚上好，伙计们，我面临着一个看似简单的问题，很抱歉我的英语不好。单击save按钮时调用handleSubmit方法，因此三元条件检查字段是否在验证范围内，如果不在验证范围内，则将其状态更改为true，在输入中呈现错误初始状态 nameError: false, cpfError: false, emailError: false, phoneError: false, birthdayError: false, addressError: false, numbe

晚上好，伙计们，我面临着一个看似简单的问题，很抱歉我的英语不好。单击save按钮时调用handleSubmit方法，因此三元条件检查字段是否在验证范围内，如果不在验证范围内，则将其状态更改为true，在输入中呈现错误

初始状态

  nameError: false,
  cpfError: false,
  emailError: false,
  phoneError: false,
  birthdayError: false,
  addressError: false,
  numberError: false,
  districtError: false,
  stateError: false,
  cityError: false,
  cepError: false,

完整方法提交：

handleSubmit = () => {
  this.state.name.length < 4
    ? this.setState({ nameError: true })
    : this.setState({ nameError: false })
  this.state.cpf.length < 14
    ? this.setState({ cpfError: true })
    : this.setState({ cpfError: false })
  this.state.email.length === 0
    ? this.setState({ emailError: true })
    : this.setState({ emailError: false })
  this.state.phone.length < 15
    ? this.setState({ phoneError: true })
    : this.setState({ phoneError: false })
  this.state.birthday.length < 10
    ? this.setState({ birthdayError: true })
    : this.setState({ birthdayError: false })
  this.state.address.length === 0
    ? this.setState({ addressError: true })
    : this.setState({ addressError: false })
  this.state.number.length === 0
    ? this.setState({ numberError: true })
    : this.setState({ numberError: false })
  this.state.district.length === 0
    ? this.setState({ districtError: true })
    : this.setState({ districtError: false })
  this.state.state.length === 0
    ? this.setState({ stateError: true })
    : this.setState({ stateError: false })
  this.state.city.length === 0
    ? this.setState({ cityError: true })
    : this.setState({ cityError: false })
  this.state.cep.length !== 9
    ? this.setState({ cepError: true })
    : this.setState({ cepError: false })

  if (
    !this.state.nameError &&
    !this.state.cpfError &&
    !this.state.emailError &&
    !this.state.phoneError &&
    !this.state.birthdayError &&
    !this.state.addressError &&
    !this.state.numberError &&
    !this.state.districtError &&
    !this.state.stateError &&
    !this.state.cityError &&
    !this.state.cepError
  ) {
    this.props.updateUser({
      name: this.state.name,
      cpf: this.state.cpf,
      email: this.state.email,
      phone: this.state.phone,
      birthday: this.state.birthday,
      address: this.state.address,
      number: this.state.number,
      district: this.state.district,
      complement: this.state.complement,
      state: this.state.state,
      city: this.state.city,
      cep: this.state.cep,
      avatar: this.state.avatar,
    })
  }
}

是的，使用

this.setState（）

和

this.props.updateUser（）创建的逻辑是异步的。您需要的是在更新状态后调用this.props.updateUser（）
this.setState（）
实际上附带了一个可选的辅助参数，您可以在状态完成更新后调用它，这正是您所需要的
让我来帮你重组一些代码。这也是沙箱：
此外，您确实希望避免在每次检查输入值时不断更新状态。这可能会导致非常糟糕的性能问题。最好在一次操作中更新您的状态
import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  state = {
    name: '',
    cpfr: '',
    email: '',
    phone: '',
    birthday: '',
    address: '',
    number: '',
    district: '',
    state: '',
    city: '',
    cep: '',
    errors: {},
  }

  handleOnChange = event => {
    this.setState({
      [event.target.name]: event.target.value,
    })
  }

  validateAndSubmit = event => {
    event.preventDefault()
    const {
      name,
      cpfr,
      email,
      phone,
      birthday,
      address,
      number,
      district,
      state,
      city,
      cep,
      errors,
    } = this.state
    name.length < 4 ? (errors.name = true) : delete errors.name
    cpfr.length < 14 ? (errors.cpfr = true) : delete errors.cpfr
    email.length === 0 ? (errors.email = true) : delete errors.email
    phone.length < 15 ? (errors.phone = true) : delete errors.phone
    birthday.length < 10 ? (errors.birthday = true) : delete errors.birthday
    address.length === 0 ? (errors.address = true) : delete errors.address
    number.length === 0 ? (errors.number = true) : delete errors.number
    district.length === 0 ? (errors.district = true): delete errors.district
    state.length === 0 ? (errors.state = true) : delete errors.state
    city.length === 0 ? (errors.city = true) : delete errors.city
    cep.length !== 9 ? (errors.cep = true) : delete errors.cep

    this.setState(
      {
        errors: errors,
      },
      () => {
        //check if there are no errors
        if(Object.keys(this.state.errors).length === 0){
          this.props.updateUser({
            name: this.state.name,
            cpf: this.state.cpf,
            email: this.state.email,
            phone: this.state.phone,
            birthday: this.state.birthday,
            address: this.state.address,
            number: this.state.number,
            district: this.state.district,
            complement: this.state.complement,
            state: this.state.state,
            city: this.state.city,
            cep: this.state.cep,
            avatar: this.state.avatar,
          })
        }
      }
    )
  }

  render() {
    return (
      <div>
        <form onSubmit={this.validateAndSubmit}>
          <input
            name="name"
            value={this.state.name}
            onChange={this.handleOnChange}
          />
          <input
            name="cpfr"
            value={this.state.cpfr}
            onChange={this.handleOnChange}
          />
          <input
            name="email"
            value={this.state.email}
            onChange={this.handleOnChange}
          />
          <input
            name="phone"
            value={this.state.phone}
            onChange={this.handleOnChange}
          />
          <input
            name="birthday"
            value={this.state.birthday}
            onChange={this.handleOnChange}
          />
          <input
            name="address"
            value={this.state.address}
            onChange={this.handleOnChange}
          />
          <input
            name="number"
            value={this.state.number}
            onChange={this.handleOnChange}
          />
          <input
            name="district"
            value={this.state.district}
            onChange={this.handleOnChange}
          />
          <input
            name="state"
            value={this.state.state}
            onChange={this.handleOnChange}
          />
          <input
            name="city"
            value={this.state.city}
            onChange={this.handleOnChange}
          />
          <input
            name="cep"
            value={this.state.cep}
            onChange={this.handleOnChange}
          />
          <button>Submit</button>
        </form>
        You have {Object.keys(this.state.errors).length} errors
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

从“React”导入React
从“react dom”导入react dom
类应用程序扩展了React.Component{
状态={
名称：“”，
cpfr:“”，
电子邮件：“”，
电话：''，
生日：''，
地址：''，
编号：''，
地区：''，
声明：''，
城市：''，
cep:“”，
错误：{}，
}
handleOnChange=事件=>{
这是我的国家({
[event.target.name]：event.target.value，
})
}
validateAndSubmit=事件=>{
event.preventDefault（）
常数{
名称
cpfr，
电子邮件，
电话，
生日，
地址:，
数字，
地区,，
国家,，
城市
cep，
错误，
}=这个州
name.length<4？（errors.name=true）：删除errors.name
cpfr.length<14？（errors.cpfr=true）：删除errors.cpfr
email.length==0？（errors.email=true）：删除errors.email
phone.length<15？（errors.phone=true）：删除errors.phone
birthday.length<10？（errors.birthday=true）：删除errors.birthday
address.length==0？（errors.address=true）：删除errors.address
number.length==0？（errors.number=true）：删除errors.number
district.length==0？（errors.district=true）：删除errors.district
state.length==0？（errors.state=true）：删除errors.state
city.length==0？（errors.city=true）：删除errors.city
cep.length！==9？（errors.cep=true）：删除errors.cep
这是我的国家(
{
错误：错误，
},
() => {
//检查是否没有错误
if（Object.keys（this.state.errors）.length==0）{
this.props.updateUser({
名称：this.state.name，
cpf:this.state.cpf，
电子邮件：this.state.email，
电话：这个州的电话，
生日：这个州，生日，
地址：this.state.address，
编号：this.state.number，
地区：这个州，
补语：this.state.complete，
州：这个州，
城市：这个州，这个城市，
cep:this.state.cep，
阿凡达：这个.state.avatar，
})
}
}
)
}
render（）{
返回(
提交
您有{Object.keys（this.state.errors）.length}个错误
)
}
}
ReactDOM.render（，document.getElementById（'root'））
是的，使用this.setState（）
和this.props.updateUser（）创建的逻辑是异步的。您需要的是在更新状态后调用this.props.updateUser（）
this.setState（）
实际上附带了一个可选的辅助参数，您可以在状态完成更新后调用它，这正是您所需要的
让我来帮你重组一些代码。这也是沙箱：
此外，您确实希望避免在每次检查输入值时不断更新状态。这可能会导致非常糟糕的性能问题。最好在一次操作中更新您的状态
import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  state = {
    name: '',
    cpfr: '',
    email: '',
    phone: '',
    birthday: '',
    address: '',
    number: '',
    district: '',
    state: '',
    city: '',
    cep: '',
    errors: {},
  }

  handleOnChange = event => {
    this.setState({
      [event.target.name]: event.target.value,
    })
  }

  validateAndSubmit = event => {
    event.preventDefault()
    const {
      name,
      cpfr,
      email,
      phone,
      birthday,
      address,
      number,
      district,
      state,
      city,
      cep,
      errors,
    } = this.state
    name.length < 4 ? (errors.name = true) : delete errors.name
    cpfr.length < 14 ? (errors.cpfr = true) : delete errors.cpfr
    email.length === 0 ? (errors.email = true) : delete errors.email
    phone.length < 15 ? (errors.phone = true) : delete errors.phone
    birthday.length < 10 ? (errors.birthday = true) : delete errors.birthday
    address.length === 0 ? (errors.address = true) : delete errors.address
    number.length === 0 ? (errors.number = true) : delete errors.number
    district.length === 0 ? (errors.district = true): delete errors.district
    state.length === 0 ? (errors.state = true) : delete errors.state
    city.length === 0 ? (errors.city = true) : delete errors.city
    cep.length !== 9 ? (errors.cep = true) : delete errors.cep

    this.setState(
      {
        errors: errors,
      },
      () => {
        //check if there are no errors
        if(Object.keys(this.state.errors).length === 0){
          this.props.updateUser({
            name: this.state.name,
            cpf: this.state.cpf,
            email: this.state.email,
            phone: this.state.phone,
            birthday: this.state.birthday,
            address: this.state.address,
            number: this.state.number,
            district: this.state.district,
            complement: this.state.complement,
            state: this.state.state,
            city: this.state.city,
            cep: this.state.cep,
            avatar: this.state.avatar,
          })
        }
      }
    )
  }

  render() {
    return (
      <div>
        <form onSubmit={this.validateAndSubmit}>
          <input
            name="name"
            value={this.state.name}
            onChange={this.handleOnChange}
          />
          <input
            name="cpfr"
            value={this.state.cpfr}
            onChange={this.handleOnChange}
          />
          <input
            name="email"
            value={this.state.email}
            onChange={this.handleOnChange}
          />
          <input
            name="phone"
            value={this.state.phone}
            onChange={this.handleOnChange}
          />
          <input
            name="birthday"
            value={this.state.birthday}
            onChange={this.handleOnChange}
          />
          <input
            name="address"
            value={this.state.address}
            onChange={this.handleOnChange}
          />
          <input
            name="number"
            value={this.state.number}
            onChange={this.handleOnChange}
          />
          <input
            name="district"
            value={this.state.district}
            onChange={this.handleOnChange}
          />
          <input
            name="state"
            value={this.state.state}
            onChange={this.handleOnChange}
          />
          <input
            name="city"
            value={this.state.city}
            onChange={this.handleOnChange}
          />
          <input
            name="cep"
            value={this.state.cep}
            onChange={this.handleOnChange}
          />
          <button>Submit</button>
        </form>
        You have {Object.keys(this.state.errors).length} errors
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

从“React”导入React
从“react dom”导入react dom
类应用程序扩展了React.Component{
状态={
名称：“”，
cpfr:“”，
电子邮件：“”，
电话：''，
生日：''，
地址：''，
编号：''，
地区：''，
声明：''，
城市：''，
cep:“”，
错误：{}，
}
handleOnChange=事件=>{
这是我的国家({
[event.target.name]：event.target.value，
})
}
validateAndSubmit=事件=>{
event.preventDefault（）
常数{
名称
cpfr，
电子邮件，
电话，
生日，
地址:，
数字，
地区,，
国家,，
城市
cep，
错误，
}=这个州
name.length<4？（errors.name=true）：删除errors.name
cpfr.length<14？（errors.cpfr=true）：删除errors.cpfr
email.length==0？（errors.email=true）：删除errors.email
phone.length<15？（errors.phone=true）：删除errors.phone
birthday.length<10？（errors.birthday=true）：删除errors.birthday
address.length==0？（errors.address=true）：删除errors.address
number.length==0？（errors.number=true）：删除errors.number
district.length==0？（errors.district=true）：删除errors.district
state.length==0？（errors.state=true）：删除errors.state
city.length==0？（errors.city=true）：删除errors.city
cep.length！==9？（errors.cep=true）：删除errors.cep
这是我的国家(
{
错误：错误，
},
() => {
//检查是否没有错误
if（Object.keys（this.state.errors）.length==0）{
this.props.update
// Collect all of your error items
const nameError = this.state.name.length < 4;
const cpfError = this.state.cpf.length < 14;
...

// Set the state with your error values
this.setState({
  nameError,
  cpfError,
  ...
}, () => { // <-- The second parameter of setState is a callback called after it is finished
  if (
    !this.state.nameError &&
    !this.state.cpfError &&
    ...
  ) {
     this.props.updateUser({
       name: this.state.name,
       ...
     });
  }
);