javascript - this.setState() 不使用传递的数组更新状态

Question

我正在传递一个包含以下凭据的数组:

//Snippet variable contains an array which looks like this

{
details: test, 
_id: "5d9d0b506ee7d03a54d8b1f6", 
name: "TEST GREEN", 
content: "<div style="background-color:green; height:100px; width:100px;"></div>", 
}

数组由函数接收，函数更新状态。状态如下所示:

  constructor(props) {
    super(props)
    this.showModal = React.createRef()
    this.state = {
      snippets: [],
      edit: null,
      show: false,
      sid: '',
    }
  }

函数看起来像这样

  handleModal = snippet => {
    console.log(snippet) //pastes output found in the snippet array above
    console.log(this.state) //{snippets: Array(3), edit: null, show: false, sid: ""}
    this.setState({ edit: this.snippet })
    console.log(this.state)//{snippets: Array(3), edit: null, show: false, sid: ""}
    this.setState({ sid: snippet._id })
    this.showModal.current.showModal()
  }

我知道我有两个 setState。我正在尝试找出问题所在。

状态中的

edit: null 应该变成 edit: Array(1) 但 setState 似乎失败了。

Answer 1

有两个问题:

this.snippet

您应该使用 snippet 而不是 this.snippet 更新您的状态

this.setState({ edit: snippet })

this.setState 是异步的

方法 this.setState() 是异步的。然后，如果您在其之后立即登录，状态可能还不会更新。如果您想查看更新后的状态，请将回调传递给该方法，如下所示:

this.setState({ edit: snippet }, () => console.log(this.state))