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

在父组件中，我向下传递一个方法以进行 try 并获取被推入数组的所选元素的值，如下所示：

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上，您每次到达那里都在定义一个新数组，因此它将不具有上一次运行的值。您应该将其存储在某个地方。

Answer 2

这里有2个问题：

arr是局部变量。它不会保留先前的onClick结果。
setState是一个异步事件。根据{{3}}：

setState（）并不总是立即更新组件。

setState((state, props) => {}, () => { /*callback */})应该使用。

class Box extends React.Component {
  state = {
    active: false
  };

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

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

次要音符：

key值不在子组件的this.props中，因此您不必传递它，但不会影响结果。

在App组件中，为了显示起见，我们在类级别创建一个数组：

class App extends React.Component {
  state = {
    needsOptions: ["Birthday", "Christmas", "School achievement"]
  };

  arr = [];

  getSelection = val => {
    this.arr.push(val);
    console.log(this.arr);
  };
}

documentation

仅将单个元素推入数组

当前结果（单击全部三个按钮后）

预期的结果（单击全部三个按钮之后）

2 个答案: