javascript - 向父组件发送状态

Question

我正在使用复选框将数据添加/删除到状态(这是一个字符串数组)。

<Field
  component={DbCheckbox}
  type="checkbox"
  name={`${contact.name}`}
  color="primary"
  onClick={e => checkboxClick(e, contact)}
/>

onClick 执行此操作并将电子邮件 Prop 设置为当前状态

const checkboxClick = (e, contact) => {
    e.stopPropagation()

    const resultado = ccEmailSelected.indexOf(contact.email)

    if (resultado === -1) {
        setCcEmailSelected(ccEmailSelected.concat(contact.email))
    } else {
        setCcEmailSelected(ccEmailSelected.filter(i => contact.email !== i))
    }

    props.emails(ccEmailSelected)
}

在我的父组件上，我使用 emails 属性来接收这个字符串数组并在另一个状态下重新填充

emails={(emails) => 
this.setState({ emails }, () => console.log(this.state.emails))}

但我有一个问题，我认为是由于状态是异步的，第一个状态正确更新，但我的第二个状态，在父组件中，只在第二次交互时更新，导致相反的结果预期，首先我点击复选框，字符串被添加到第一个状态而不是第二个状态，然后当我再次点击(取消选中)时，它从第一个状态中删除并添加到第二个状态。我该如何解决这个问题？

Answer 1

为了解决这个问题，我直接在父组件上使用状态，我的复选框的 onClick 变成了这个

  const checkboxClick = (e, contact) => {
    e.stopPropagation()
    props.emails(contact.email)
  }

我在这样的父组件上收到这些电子邮件

emails={x => {
  const resultado = this.state.emails.indexOf(x)
  if (resultado === -1) {
    this.setState({ emails: [...this.state.emails, x] })
  } else {
    this.state.emails.splice(resultado, 1)
  }
}}