Question

我有一个Option类，每个选项有多个Values。当我添加一个值时，将呈现一个新组件，该组件允许用户输入一个值。用户还可以删除一个值。当用户按照创建顺序删除值时（最新的优先），这些值就消失了。但是，如果用户删除了一个不按顺序排列的值（希望如此），则成功修改了组成组件的状态下的数组，但最近添加的组件消失了，而不是单击的组件。

我尝试将filter函数更改为map函数，然后手动删除并修改数组的长度，但似乎没有任何办法。

deleteValue = valueId => {
    let values = this.state.values
    values = values.filter(value => {
      return value.id != valueId
    })
    this.setState({ values: values })
  }

  addValue = () => {
    let values = []
    if (this.state.values) {
      values = this.state.values
    }
    let newValue = {
      id: Math.round(Math.random() * 10000),
      name: '',
      price: 0,
      availability: true,
      type: 'POST'
    }
    this.props.rootReducer.patchItem.addValueToOption(
      this.state.id,
      newValue.id,
      '',
      newValue.price,
      newValue.availability,
      'POST'
    )
    values.push(newValue)
    this.setState({ values: values, isLoading: false })
  }

  render () {
    if (this.state.isLoading && this.state.type == 'POST') {
      this.addValue()
      return <ActivityIndicator />
    } else if (this.state.isLoading && this.state.type == 'PATCH') {
      this.getMenuItemOptionValuesFromApiAsync()
      return <ActivityIndicator />
    } else {
      let values = this.state.values.map((val, key) => {
        return (
          <EditMenuItemOptionValuesModal
            onRef={ref => (this.parentReference = ref)}
            parentReference={this.deleteValue.bind(this)}
            key={key}
            itemOptionId={this.props.id}
            id={val.id}
            name={val.name}
            price={val.price}
            availability={val.availability}
            type={val.type}
          />
        )
      })

所以，如果我有一个数组[id：1，id：2，id：3] 并且为所有三个组件渲染了组件，然后在1上单击delete，values数组变为： [id：2，id：3]，但是即使values.map提供了正确的值，呈现的组件仍然是[id：1，id：2]。

Answer 1

我认为问题在于您set key to index的数组，因此当您将新项目变异或推入导致意外行为的值时，顺序可能不正确。

尝试更改key={val.id}

即使删除组件也不会消失

1 个答案: