时间戳

首页 > 解决方案 > 组件即使被删除也不会消失

react-native - 组件即使被删除也不会消失

问题描述

我有一个类选项，每个选项有几个值。当我添加一个值时，会呈现一个允许用户输入值的新组件。用户也可以删除一个值。当用户按照创建的顺序（最近的在前）删除一个值时，这些值会消失得很好。但是，如果用户删除了一个不按顺序的值（我希望这是可能的），则成功修改了组件所在状态的数组，但最近添加的组件消失了，而不是单击的那个.

我尝试将过滤器函数更改为映射函数，然后手动删除和修改数组的长度，但似乎没有任何效果。

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 上的删除，值数组变为： [id: 2, id: 3] 但是即使 values.map 给出了正确的值，渲染的组件仍然是 [id: 1, id: 2]。

标签： react-native

解决方案

我认为问题在于您将键设置为数组的索引，因此当您将新项目变异或推送到导致意外行为的值时，顺序可能不正确。

尝试改变key={val.id}

推荐阅读