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子阵列。