Question

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

在提交时，我还通过从rooms传递单个对象来进行api调用，当响应到来时，我从数据（但不是来自slice）中对该对象进行了rooms直到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中的

数组（作为所有对象）由引用传递。因此，如果您进行简单的分配，例如arr2 = arr1，则splice方法也将使原始数组发生变化。对于像您这样的嵌套数组（对象）也是如此。 data子数组与rooms一起存储在state中。因此，变异数据也会影响rooms子数组。

Array.splice可在两个状态子数组上使用

1 个答案: