javascript - 只将单个元素插入数组

Question

我有一个组件，您可以通过单击它来打开/关闭它:

clickHandler = () => {
    this.setState({active: !this.state.active})
    this.props.getSelection(this.state.active)
}

render() {
    const { key, children } = this.props;
    return (
        <button
            key={key}
            style={{...style.box, background: this.state.active ? 'green' : ''}}
            onClick={() => this.clickHandler()}
        >
            {children}
        </button>
    );
}

在父组件中，我传递了一个方法，以便尝试并获取推送到数组中的所选元素的值，如下所示:

getSelection = (val) => {
    const arr = []
    arr.push(val);
    console.log(arr, 'arr');
}

我的问题是它只向数组添加一个元素，因此数组长度始终为 1(即使单击了多个项目)。

当前结果(点击全部三个后)

console.log(arr, 'arr') // ["Birthday"] "arr"

预期结果(点击全部三个后)

console.log(arr, 'arr') // ["Birthday", "Christmas", "School achievement"] "arr"

链接到Codepen

有什么想法吗？

Answer 1

有两件事:setState 是异步的，因此在下一行中您可能会也可能不会获得最新值，因此我建议更改

clickHandler = () => {
    this.setState({active: !this.state.active})
    this.props.getSelection(this.state.active)
  }

至

clickHandler = () => {
   this.setState({active: !this.state.active}, () => {
      this.props.getSelection(this.state.active)
   })
}

setState 的第二个参数是一个回调函数，将在 setState 完成后立即执行。

第二件事，在 getSelection 上，您每次到达时都会定义一个新数组，因此它不会包含上次运行的值。你应该把它存放在某个地方。