javascript - Array.splice 适用于两个状态子数组

Question

这是我的简单 react 组件。我首先将 rooms 设置为 componentWillReceiveProps 中的状态，然后在 submit 上将 rooms 设置为 data 也处于状态。

此外，在提交时，我通过从房间传递单个对象来进行API调用，当响应到来时，我会从数据中切片该对象(但不是从rooms)，直到data长度等于0。

现在的问题是，当我从 data 中进行 slice 时，它也会对 rooms 元素进行 slice 。

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 中的数组(和所有对象一样)是通过引用传递的。因此，如果您执行像 arr2 = arr1 这样的简单赋值，则 splice 方法也会改变原始数组。对于像您的情况这样的嵌套数组(对象)也是如此。 data子数组与rooms一起存储在state中。因此，改变数据也会影响 rooms 子数组。