changeTab(status){ // console.log(status); if(status === '已完成'){ this.setState({ select:status, newArr : this.state.arr.filter(item=>item.done), }) }else if(status === '未完成'){ this.setState({ select:status, newArr : this.state.arr.filter(item=>!item.done), }) }else{ this.setState({ select:status, newArr : this.state.arr, }) } }这段代码如何优化

这段代码可以进行如下优化:

1. 使用解构赋值来简化代码，并且减少对this.state的多次引用。

changeTab(status) {
  const { arr } = this.state;
  
  let newArr;
  if (status === '已完成') {
    newArr = arr.filter(item => item.done);
  } else if (status === '未完成') {
    newArr = arr.filter(item => !item.done);
  } else {
    newArr = arr;
  }
  
  this.setState({
    select: status,
    newArr: newArr,
  });
}

2. 使用三元表达式来简化条件判断，避免重复的setState代码。

changeTab(status) {
  const { arr } = this.state;
  
  const newArr = (status === '已完成')
    ? arr.filter(item => item.done)
    : (status === '未完成')
      ? arr.filter(item => !item.done)
      : arr;
  
  this.setState({
    select: status,
    newArr: newArr,
  });
}

3. 将状态更新的代码提取出来，避免多次重复的setState调用。

changeTab(status) {
  const { arr } = this.state;
  
  let newArr;
  if (status === '已完成') {
    newArr = arr.filter(item => item.done);
  } else if (status === '未完成') {
    newArr = arr.filter(item => !item.done);
  } else {
    newArr = arr;
  }
  
  this.updateState(status, newArr);
}

updateState(select, newArr) {
  this.setState({
    select: select,
    newArr: newArr,
  });
}

这样的优化可以使代码更加简洁和可读，并且避免了重复的代码。