Question

我在某个地方看到了这个，我很困惑。我从来没有这样做过，实际上它是做什么的？

doSomething = index => {
    const tempState = this.state
    tempState.keys.push(index)

    this.setState({
      ...tempState
    })
  }

Answer 1

<form id="report">
      <div class="form-group">
          <label for="post-data">Report Data(Text Format):</label>&nbsp;&nbsp;
           <textarea class="form-control" rows="20" id="post-data" name="post-data"></textarea>
       </div>
   <div class="form-group">
        <div class="col-sm-6"><button type="submit" class="btn btn-primary btn-block" name="launch" id="launch" onclick="invoke_reporting(document.getElementById('post-data').value)">Launch</button>
     </div>
   </div>

</form>

以上内容为const tempState = this.state分配了对状态对象的引用

tempState

tempState.keys.push(index)具有键的属性，该属性保存对数组的引用，并在数组上调用push以将tempState添加到数组中

index

this.setState({ ...tempState })被调用，状态的新副本被传递到this.setState中。传播运算符基本上是将旧状态的内容复制到新对象中。

Answer 2

上述实现不是完美的实现，应加以改进，以免使原始状态对象发生变异。

doSomething = index => {
    const tempState = this.state  // assing reference of state to tempState
    tempState.keys.push(index) // push a value to `keys` property value within state. Note that Javascript object assignment works by reference and hence this will actually mutate the state object

    this.setState({ 
      ...tempState
    }) // call setState to update state and pass the cloned version of tempState using spread syntax as the new state values
  }

尽管上述实现在setState之前克隆了该值，但它是不正确的，因为它应该在对其进行任何更新之前先克隆该值

doSomething = index => {
    const keys = [...this.state.keys]
    keys.push(index)

    this.setState({
      keys
    })
  }

但是，由于您使用ES5，因此为了克隆值，可以使用concat使用类似setState之类的功能setState来更新键数组

doSomething = index => {

    this.setState(prevState => ({
      keys: prevState.keys.concat([index])
    }))
  }

我希望以上答案能为您寻找的解释提供一个见识

分布在反应的setState中

2 个答案: