Question

我尝试做一个确定状态是否为空的函数

const {  startDate, endDate ,classname} = this.state;

if(!startDate || !endDate || !selectedRoom || !selectedTrainer || !classname){

    if(!classname){
      this.setState({classnamevalid : 'errorBorder_Invalid'});
     } else {
      this.setState({classnamevalid : ''});
     }
     if(!startDate){
      this.setState({startDatevalid : 'errorBorder_Invalid'});
     }else{
      this.setState({startDatevalid : ''});
     }
     if(!endDate){
      this.setState({endDatevalid : 'errorBorder_Invalid'});
     } else {
      this.setState({endDatevalid : ''});
     }

} else {

  console.log(proceed)
}

到目前为止，我所做的是，而且我认为这行不通。 “我知道它很蠢”

if(!startDate || !endDate || !selectedRoom || !selectedTrainer || !classname){

    const validation = ["startDate", "endDate" ,"classname"];
    var i;
    for (i = 0; i < validation.length; i++) {

      if(!this.state.validation[i]){
          this.setState({validation[i] : 'errorBorder_Invalid'});
      } else {
          this.setState({validation[i] : ''});
      }

    }

} else {

  console.log(proceed)
}

Answer 1

我认为您可以使用conditional operator摆脱类似问题。

const { startDate, endDate, classname } = this.state;

if (!startDate || !endDate || !selectedRoom || !selectedTrainer || !classname) return console.log(proceed);

this.setState({ classnamevalid: !classname ? "errorBorder_Invalid" : "" });
this.setState({ startDatevalid: !startDate ? "errorBorder_Invalid" : "" });
this.setState({ endDatevalid: !endDate ? "errorBorder_Invalid" : "" });

/* or get super-funky */

const { startDate, endDate, classname } = this.state;
if (!startDate || !endDate || !selectedRoom || !selectedTrainer || !classname) return console.log(proceed);
[classname, startDate, endDate].forEach( prop => this.setState({ [`${prop}valid`]: !prop ? "errorBorder_Invalid" : "" }));

Answer 2

我想提出如下建议；

const {  startDate, endDate ,classname} = this.state;

if(!startDate || !endDate || !selectedRoom || !selectedTrainer || !classname){
  this.setState({
    [`${!classname ? 'classnamevalid' : 'classnametmp'}`]: 'errorBorder_Invalid',
    [`${classname ? 'classnamevalid' : 'classnametmp'}`]: '',
    [`${!startDate ? 'startDatevalid' : 'startDatetmp'}`]: 'errorBorder_Invalid',
    [`${startDate ? 'startDatevalid' : 'startDatetmp'}`]: '',
    [`${!endDate ? 'endDatevalid' : 'endDatetmp'}`]: 'errorBorder_Invalid',
    [`${endDate ? 'endDatevalid' : 'endDatetmp'}`]: '',
  });
} else {
  console.log(proceed)
}

首先，我专注于调用setState一次，以减少渲染次数。

第二，我添加了三个状态（classnametmp，startDatetmp和endDatetmp）。如果您使用的条件运算符没有如下所示的tmp状态，则可以复制['']状态并抛出错误。

this.setState({
  [`${!classname ? 'classnamevalid' : ''}`]: 'errorBorder_Invalid',
  [`${classname ? 'classnamevalid' : ''}`]: '',
  [`${!startDate ? 'startDatevalid' : ''}`]: 'errorBorder_Invalid',
  [`${startDate ? 'startDatevalid' : ''}`]: '',
  [`${!endDate ? 'endDatevalid' : ''}`]: 'errorBorder_Invalid',
  [`${endDate ? 'endDatevalid' : ''}`]: '',
});

当然，如果要使用迭代，reduce将是一个很好的工具。

if(!startDate || !endDate || !selectedRoom || !selectedTrainer || !classname){
  const state = ["startDate", "endDate" ,"classname"].reduce((acc, ele) => {
      acc[`${ele}valid`] = !this.state[ele] ? 'errorBorder_Invalid' : '';
      return acc;
  }, {});

  this.setState(state);
}

请检查以上方法，如有疑问请发表评论。

有没有一种方法可以缩短涉及setState的验证脚本？

2 个答案: