我无法在状态中设置空数组

Question

我正在设置一个应用程序，并且在此应用程序中有一个列表，此列表中的项目有一个标题和一个用于删除项目的按钮，我可以删除几乎所有项目，但是当休息一个元素时我无法删除，但是我可以...我只是不能 setState 一个空数组。我正在使用 lodash 删除元素。

我尝试将新数组放入 aux var 并检查大小是否等于 0，然后直接将 setState 设置为空数组，而不是使用 remove 函数执行此操作。

class FuelReservesFilterView extends React.Component {
  state = { plates: [] };

  goToOperationsSearch = () => {
    Actions.selectOperationView({
      backSceneKey: "fuelReservesFilterView",
    });
  };

  goToPlateSearch = () => {
    Actions.selectPlateView({
      backSceneKey: "fuelReservesFilterView",
    });
  };

  goToStatusSearch = () => {
    Actions.selectStatusVehicleView({
      backSceneKey: "fuelReservesFilterView",
    });
  };

  componentDidUpdate() {
    if (this.props.placa) {
      if (_.last(this.state.plates) != this.props.placa) {
        this.setState({
          plates: [...this.state.plates, this.props.placa],
        });
      }
    }
  }

  renderBtnOperacao() {
    if (!this.props.operacao)
      return (
        <ButtonRounded
          onPress={this.goToOperationsSearch}
          textColor={ACCENT_COLOR}
          label={i18n.t("Select_operation")}
        />
      );
    else
      return (
        <TouchableOpacity onPress={this.goToOperationsSearch}>
          <View>
            <TextTitle style={styles.textStyle}>
              {this.props.operacao.nome}
            </TextTitle>
          </View>
        </TouchableOpacity>
      );
  }

  renderBtnStatus() {
    if (!this.props.status)
      return (
        <ButtonRounded
          onPress={this.goToStatusSearch}
          textColor={ACCENT_COLOR}
          label={i18n.t("Select_status_vehicle")}
        />
      );
    else
      return (
        <TouchableOpacity onPress={this.goToStatusSearch}>
          <View>
            <TextTitle style={styles.textStyle}>
              {this.props.status.nome}
            </TextTitle>
          </View>
        </TouchableOpacity>
      );
  }

  renderPlateItem({ item }) {
    return (
      <ClearItem
        withIcon
        onPressIcon={() => {
          this.removerItem(item);
        }}
        id={item.id}
        text={item.placa}
        icon="close"
      />
    );
  }

  removerItem = item => {  
      this.setState({ plates: _.remove(this.state.plates, function(plate) {
          return plate.placa != item.placa;
       })
    });
  };

  renderPlatesList() {
    if (_.size(this.state.plates) > 0) {
      return (
        <FlatList
          style={this.props.style}
          data={this.state.plates}
          renderItem={this.renderPlateItem.bind(this)}
          keyExtractor={plate => plate.placa}
        />
      );
    }
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <ButtonRounded
          onPress={this.goToPlateSearch}
          textColor={ACCENT_COLOR}
          label={i18n.t("Select_plate")}
        />
        {this.renderPlatesList()}
        <Divider space={20} />
        {this.renderBtnOperacao()}
        <Divider space={20} />
        {this.renderBtnStatus()}
        <Divider space={20} />
        <TextTitle>{i18n.t("Minimal_level")}</TextTitle>
        <CustomSlider
          min={0}
          max={100}
          metric="%"
          onValueChange={value => console.log(value)}
        />
        <TextTitle>{i18n.t("Maximum_level")}</TextTitle>
        <CustomSlider
          min={0}
          max={100}
          value={100}
          metric="%"
          onValueChange={value => console.log(value)}
        />
        <Divider space={20} />
        <ButtonRounded
          style={{ marginBottom: 50 }}
          textColor={PRIMARY_COLOR}
          label={i18n.t("Apply_filter")}
        />
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: PADDING_VIEW,
  },
  textStyle: {
    textAlign: "center",
  },
});

const mapStateToProps = state => {
  return {};
};

export default connect(
  mapStateToProps,
  {},
)(FuelReservesFilterView);

Answer 1

你为什么使用 lodash？它可以通过函数内置数组来完成。删除 lodash 函数正在改变状态变量，这在 React 中是不可接受的。

state = {
    items: [
      { name: "John", id: 1 },
      { name: "Paul", id: 2 },
      { name: "jonathan", id: 3 }
    ]
  };

  removeItem = id =>
    this.setState(prev => ({
      items: prev.items.filter(item => id !== item.id)
    }));

  render() {
    return (
      <div className="App">
        {this.state.items.map(item => (
          <div onClick={() => this.removeItem(item.id)} key={item.id}>
            remove {item.name} id {item.id}
          </div>
        ))}
      </div>
    );
  }