Question

我正在使用“ react-native-swipe-list-view”尝试删除某项。由于某些原因，当我尝试删除一个项目时，即使该项目仍显示在数组中并且正确的项目也被删除，它仍从平面列表中删除了最后一个项目。

基本上，当我删除一个项目时，即使该项目仍存在于数据数组中，也总是将其从平面列表中删除。非常奇怪的活动。当我离开并返回页面时，将显示正确的数据。

CoinList.js

import React, { Component } from "react";
import { FlatList, StyleSheet, Text, View , AsyncStorage } from "react-native";
import CoinListRow from './CoinListRow';


class CoinList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      coinList: null
    };
  }


  updateCoinList = (updatedCoins) => {
    this.setState(
      {coinList: updatedCoins}
    )
  }

  componentDidMount() {
    AsyncStorage.getItem("coins").then(value => {
      // need to convert returned object into an array
      this.setState({coinList: Object.values(JSON.parse(value))})
    });
  }

  render() {
    return (
      <View style={styles.container}>
        {this.state.coinList !== null ? <FlatList
          data={this.state.coinList}
          keyExtractor={(item, index) => index.toString()}
          extraData={this.state}
          renderItem={({item}) => <CoinListRow style={styles.item} item={item} updateCoinList={this.updateCoinList}/>}
        /> : null}
      </View>
    );
  }
}

export default CoinList;

CoinListRow：

import React, { Component } from "react";
import { withNavigation } from "react-navigation";
import { AsyncStorage } from "react-native";
import { View, StyleSheet, Text, TouchableOpacity } from "react-native";
import { ListItem } from "react-native-elements";
import { SwipeRow } from "react-native-swipe-list-view";

import images from "../../assets/logos/coinLogos";

class CoinListRow extends Component {
  constructor() {
    super();
    this.state = {
      coinInfo: null,
      disableInterstitialBtn: false
    };
  }

  componentDidMount() {
    const { item } = this.props;
    return fetch(`https://api.coincap.io/v2/assets/${item.card.slug}`)
      .then(response => response.json())
      .then(responseJson => {
        console.log(responseJson);
        this.setState({
          isLoading: false,
          coinInfo: responseJson.data
        });
      })
      .catch(error => {
        console.error(error);
      });
  }


  removeCoin = () => {
  AsyncStorage.getItem('coins')
    .then((coins) => {
      AsyncStorage.removeItem('coins');
      let c = coins ? JSON.parse(coins) : {};
      delete c[this.props.item.card.slug]
      AsyncStorage.setItem('coins', JSON.stringify(c));
      this.props.updateCoinList(Object.values(c));
    })
    .catch((error)=> {
      console.log(error);
      alert(error);
    }
    )
  }

  render() {
    const { coinInfo } = this.state;
    const { item } = this.props;
    console.log(this.state.coinInfo);
    return (
      <View>
        {this.state.coinInfo ? (
          <SwipeRow disableRightSwipe={true} rightOpenValue={-120}>
            <View style={styles.standaloneRowBack}>
              <Text style={styles.backTextWhite}></Text>
              <TouchableOpacity onPress={this.removeCoin}><Text style={styles.backTextWhite}>Remove Item</Text></TouchableOpacity>
            </View>
            <View>
              <ListItem
                key={item.card.slug}
                leftAvatar={{ source: images[item.card.slug] }}
                title={coinInfo.name}
                titleStyle={{ fontWeight: "bold" }}
                subtitle={coinInfo.symbol}
                onPress={this._openInterstitial}
                chevron
                bottomDivider={true}
              />
            </View>
          </SwipeRow>
        ) : null}
      </View>
    );
  }
}

export default withNavigation(CoinListRow);

Answer 1

我认为这可能是因为

removeCoin = () => {
  AsyncStorage.getItem('coins')
    .then((coins) => {
      AsyncStorage.removeItem('coins');
      let c = coins ? JSON.parse(coins) : {};
      delete c[this.props.item.card.slug]
      AsyncStorage.setItem('coins', JSON.stringify(c));
      this.props.updateCoinList(Object.values(c));
    })
    .catch((error)=> {
      console.log(error);
      alert(error);
    }
    )
  }

您使用了异步功能，但实际上并没有等到它完成后再更新硬币。不太确定，但是您可以通过这种方式尝试（也许您需要对其进行编辑）：

removeCoin = () => {
  AsyncStorage.getItem('coins')
    .then((coins) => {
      AsyncStorage.removeItem('coins');
      let c = coins ? JSON.parse(coins) : {};
      delete c[this.props.item.card.slug]
      this.setState({coinItem: c});
    }).then(async() => {
      await AsyncStorage.setItem('coins', JSON.stringify(this.state.coinItem));
    }).then(() => {
      this.props.updateCoinList(Object.values(this.state.coinItem));
    })
    .catch((error)=> {
      console.log(error);
      alert(error);
    }
    )
  }

Answer 2

我忘记根据不断变化的道具运行componentDidUpdate。我准备吃点零食，然后意识到我做git stash时忘了保存代码：

我在考虑是否要更新父组件中的道具，然后它会通过传递新的道具来自动触发刷新，但是由于该组件已经安装，因此我需要事后刷新。

 componentDidUpdate(prevProps) {
    const { item } = this.props;
    if (prevProps.item !== this.props.item) {
      return fetch(`https://api.coincap.io/v2/assets/${item.card.slug}`)
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          coinInfo: responseJson.data
        });
      })
      .catch(error => {
        console.error(error);
      });
    }
  }

React Native Flatlist删除项目删除最后一个项目

2 个答案: