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 or untrakced只有两种类型的值。

因此数组将具有，

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

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

有人可以帮我吗？

Answer 1

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

如果您想保持typeAdded不变，可以尝试改用基于索引的值。

例如，请参见此处的codeandbox：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()并按索引切换值即可。

过滤器从反应中删除数组中的元素

1 个答案: