我不能在狀態中設置一個空數組

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>
    );
  }