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

Answer 2

您应该使用snippet代替this.snippet。

Answer 3

setState不会立即更新状态。可能需要一些时间。如果您只想在状态更新后才执行某些操作，请将代码放在setState回调中。

this.setState({...newState}, () => {
 // actions after state update.
})

Answer 4

this.snippet注意，您应该使用

__init__

希望有帮助

Answer 5

setState是异步的，状态不会立即更新。尝试使用setState的第二个参数-回调函数

this.setState({ sid: snippet._id }, () => this.showModal.current.showModal())