向父組件發送狀態

Question

我正在使用復選框將數據添加/刪除到狀態（是字符串數組）。

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

onClick會執行此操作，並將電子郵件道具設置為當前狀態

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