Javascript 有没有办法缩短涉及setState的验证脚本？

我试着做一个函数，确定一个状态是否为空，到目前为止我做的是什么

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)
}

到目前为止，我所做的是，正如我所认为的那样，这是行不通的。“我知道这很愚蠢”

如果（！startDate | | |！endDate | |！selectedRoom | |！selectedTrainer | |！classname）{
常量验证=[“开始日期”、“结束日期”、“类名”]；
var i；
对于（i=0；i

我认为您可以通过使用

const{startDate，endDate，classname}=this.state；
如果（！startDate | | |！endDate | |！selectedRoom | |！selectedTrainer | |！classname）返回console.log（继续）；
this.setState（{classnamevalid:！classname？“errorBorder_Invalid:”）；
this.setState（{startDatevalid:！startDate？“errorBorder_Invalid”：“}）；
此.setState（{endDatevalid:！endDate？\errorBorder_Invalid:“}）；
/*或者变得超级时髦*/
const{startDate，endDate，classname}=this.state；
如果（！startDate | | |！endDate | |！selectedRoom | |！selectedTrainer | |！classname）返回console.log（继续）；
[classname，startDate，endDate].forEach（prop=>this.setState（{[`${prop}valid`]：！prop？'errorBorder_Invalid:“}”）我想建议我的方法如下

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);
}

请检查以上方法，如果您有问题，请留下评论。
您认为我尝试过，但它给我的if语句带来了一个错误，我猜它无法读取（this.state.validation[i]）哇，我甚至不认为这会以这种方式工作，谢谢您，但由于我尝试了第二种方法，效果很好，但没有逆转结果（如果状态有值，则返回空），我试着使用第三种方法，虽然不管用，但不会出错，非常感谢你，在第二种方法中，我写了这篇文章是为了让你知道为什么我使用classnametmp，startDatetmp，endDatetmp。我不建议这样使用。而且，我已经意识到我们不能将对象直接放入setState。你可以使用这样的函数。setState（（prevState）=>{}）。
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);
}