javascript - 过滤器从 react 数组中删除一个元素

Question

我有一个已在状态中声明的数组。

this.state = {
  typeAdded: [] 
}

现在，我有两个表都有复选框。现在，我所做的是，如果用户单击该复选框，那么我将在该数组中添加该值，如果未选中该值，那么我将从该数组中删除该值。现在在这里，

if (e.currentTarget.checked) {
      this.setState({
        typeAdded: this.state.typeAdded.concat([type])
      }, () => {
        this.setState({
          areResumesSameType: this.state.typeAdded.every((val, i, arr) => val === arr[0])
        })
      })
    } else {
      this.setState({
        typeAdded: this.state.typeAdded.filter(function (a) {
          return a !== type 
        })
      }, () => {
        this.setState({
          areResumesSameType: this.state.typeAdded.every((val, i, arr) => val === arr[0])
        })
      });
    }

现在，这里只有两种类型的值:已跟踪或未跟踪。

所以数组将有，

["tracked", "tracked", "untracked", "tracked", "untracked"] kind of values . It represents which type of table value is checked.   

现在，当我尝试在取消选中时从该表中删除其中一个值时，在删除它时会删除与我使用 filter 匹配的所有值。因此，我正在尝试删除当时唯一的一个值，因为其他值可能已被检查，但它们也将被删除。

谁能帮我解决这个问题吗？

Answer 1

array.filter() 不适合您的设置。如果您计划将 typeAdded 设为字符串数组，请使用 [""]。如果您有多个相同的值，则该方法无法根据值有效地仅删除单个项目。

如果您想保持 typeAdded 不变，您可以尝试根据索引切换值。

请参阅此处的代码和框，例如:https://codesandbox.io/s/gallant-bardeen-7rxmh

class App extends React.Component {
  state = {
    typeAdded: []
  }

  handleOnChange = (event, index) => {
    const newState = [...this.state.typeAdded]
    if(event.currentTarget.checked){
      newState[index] = "tracked"
      this.setState({
        typeAdded: [...newState]
      })
    } else {
      newState[index] = "untracked"
      this.setState({
        typeAdded: [...newState]
      })
    }
  }

  render() {
    return (
      <div className="App">
        <input type="checkbox" onChange={(e) => this.handleOnChange(e, 0)}/>
        <input type="checkbox" onChange={(e) => this.handleOnChange(e, 1)}/>
        <input type="checkbox" onChange={(e) => this.handleOnChange(e, 2)}/>
        <input type="checkbox" onChange={(e) => this.handleOnChange(e, 3)}/>
      </div>
    );
  }
}

本质上，您只需删除 .filter() 并按索引切换值即可。