Array.splice可在兩個狀態子數組上使用

Question

這是我簡單的react組件。 我首先在componentWillReceiveProps中將rooms設置為狀態，然后在submit也將rooms設置為狀態data 。

同樣在提交時，我通過從rooms傳遞單個對象進行api調用，當響應到來時，我從數據（而不是從rooms ）中slice該對象，直到data長度等於0為止。

現在的問題是，當我做slice從data然后將其slices的rooms元素。

class EditRoom extends Component {
  constructor() {
    super()
    this.state = {
      rooms: [],
      data: []
    }
  }

  componentWillMount() {
    const { fetchRooms } = this.props
    fetchRooms()
  }

  componentWillReceiveProps(np) {
    const { rooms, setNick, setNickName } = np
    if (this.props.rooms !== rooms) {
      console.log('ppppppppppppp')
      this.setState({ rooms })
    }
    if (setNick) {
      const data = this.state.data
      data.splice(0, 1)
      this.setState({ data }, () => {
        if (data.length === 0) {
          console.log('pppp542545455453864')
        } else {
          const room = _.first(this.state.data)
          setNickName(room)
        }
      })
    }
  }

  handleInputChange(e, i) {
    const { rooms } = this.state
    rooms[i].nickname = e.target.value
    this.setState({ rooms })
  }

  onSaveClick() {
    const { setNickName } = this.props
    this.setState({ data: this.state.rooms }, () => {
      const room = _.first(this.state.data)
      setNickName(room)
    })
  }

  render() {
    const { rooms } = this.state
    return (
      <div>
        <main id="EditRoom">
          {rooms &&
            rooms.map((room, i) => {
              return (
                <div className="barcode-box" key={i} style={{ backgroundColor: this.getRandomColor(i) }}>
                  <div className="edit-room-name">
                    <input
                      type="text"
                      className="form-control"
                      style={{ color: '#ffffff' }}
                      name="cardNumber"
                      placeholder="Nickname"
                      value={_.get(room, 'nickname') || ''}
                      onChange={e => this.handleInputChange(e, i)}
                    />
                  </div>
                </div>
              )
            })}
        </main>
      </div>
    )
  }
}

我在這里想念的是什么？

謝謝 ！！！

Answer 1

您不應該直接修改this.state ，例如，使用諸如splice類的數組變異方法。 取而代之的是，從this.state.data子數組制作一個副本，修改並將其傳遞給setState() 。

像這樣：

const data = this.state.data.slice() // make a copy of data
data.splice(0, 1) // modify a copy
this.setState({ data }, ...) // pass to setState

[ 更新 ]解釋為什么更改一個狀態子數組會影響另一狀態：

JS中的數組（作為所有對象）通過reference傳遞。 因此，如果您進行簡單的賦值，例如arr2 = arr1 ，則splice方法也會使原始數組發生變化。 對於像您這樣的嵌套數組（對象）也是如此。 data子數組在state與rooms一起存儲。 因此，變異數據也會影響rooms子陣列。