Flatlist 为收藏夹选择全部，而不是一个

Question

我的 Flatlist 上的心形图标（我尝试在其中添加到切换心形，将数据保存到 AsyncStorage）无法按预期工作。相反，它会选择平面列表中的所有内容，而不是只选择一个。为什么会这样？

我有这样的代码

  componentWillMount()
  {
    const { movie_desc, UrlImage, favorite } = this.props;
    this.setState({ movie_desc, UrlImage, favorite });
  }

  componentWillUpdate() {
    LayoutAnimation.easeInEaseOut();
}

在主要的 render() 函数中，我有这个

  render() 
  {
    const { movie_desc, UrlImage, favorite } = this.state;
        return (
            <View style={styles.MainContainer}>
            <FlatList
            data={ this.state.dataSource }
            ItemSeparatorComponent = {this.FlatListItemSeparator}
            renderItem={({item}) => 
                <View style={{flex:1, flexDirection: 'row'}}>
                    <Icon
                        name={favorite ? 'heart' : 'heart-o'}
                        color={favorite ? '#F44336' : 'rgb(50, 50, 50)'}
                        size={30}
                        style={{ marginBottom: 10, marginTop: 20 }}
                        onPress={() => this.setState({ favorite: !favorite })}
                    />
                    <Image source = {{ uri: item.url_image}} style={styles.imageView} />
                    <Text style={styles.textView} >{item.movie_description}</Text>
                </View>
                }
            keyExtractor={(item, index) => index.toString()}
            />
            </View>
        );
  }
}

相反，它只是像这样选择所有内容

完整代码如下所示

import React, { Component } from 'react';
import {  StyleSheet, Platform, View, ActivityIndicator, FlatList, Text, Image, Alert, LayoutAnimation, YellowBox , Button , AsyncStorage } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
        UrlImage : '',
        movie_desc : '',
        favourite : false
    };
  }

  GetItem (movie_description) {
    Alert.alert(movie_description);
    }

    SaveData = () =>
    {
        const movieData = {
            UrlImage : this.state.UrlImage,
            movie_desc : this.state.movie_desc
        };

        AsyncStorage.setItem('movie',JSON.stringify(movieData));
    }

  ShowMovies = () =>{
    return fetch('https://uncoiled-crust.000webhostapp.com/api/movies_db.php')
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        dataSource: responseJson
      }, function() {
        // In this block you can do something with new state.
      });
    })
    .catch((error) => {
      console.error(error);
    });
  }
  
  componentWillMount()
  {
    const { movie_desc, UrlImage, favorite } = this.props;
    this.setState({ movie_desc, UrlImage, favorite });
  }

  SelectItem(movie_desc){
      Alert.alert(movie_desc);
  }

  componentWillUpdate() {
    LayoutAnimation.easeInEaseOut();
}


  componentDidMount(){
      this.ShowMovies();
  }

  FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: .5,
          width: "100%",
          backgroundColor: "#000",
        }}
      />
    );
  }
  

  render() 
  {
    const { movie_desc, UrlImage, favorite } = this.state;
        return (
            <View style={styles.MainContainer}>
            <FlatList
            data={ this.state.dataSource }
            ItemSeparatorComponent = {this.FlatListItemSeparator}
            renderItem={({item}) => 
                <View style={{flex:1, flexDirection: 'row'}}>
                    <Icon
                        name={favorite ? 'heart' : 'heart-o'}
                        color={favorite ? '#F44336' : 'rgb(50, 50, 50)'}
                        size={30}
                        style={{ marginBottom: 10, marginTop: 20 }}
                        onPress={() => this.SelectItem({ favorite: !favorite })}
                    />
                    <Image source = {{ uri: item.url_image}} style={styles.imageView} />
                    <Text style={styles.textView} >{item.movie_description}</Text>
                </View>
                }
            keyExtractor={(item, index) => index.toString()}
            />
            </View>
        );
  }
}


const styles = StyleSheet.create({
    MainContainer :{
     
        justifyContent: 'center',
        flex:1,
        margin: 5,
        marginTop: (Platform.OS === 'ios') ? 20 : 0,
    },
    imageView: {
        width: '50%',
        height: 350 ,
        margin: 7,
        borderRadius : 7
     
    },
    textView: {
        width:'50%', 
        textAlignVertical:'center',
        padding:10,
        color: '#000'
     
    }
    });

编辑

我这样做是作为编辑

import React, { Component } from 'react';
import {  StyleSheet, Platform, View, ActivityIndicator, FlatList, Text, Image, Alert, LayoutAnimation, YellowBox , Button , AsyncStorage } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
        UrlImage : '',
        movie_desc : '',
        favourite : false
    };
  }

  GetItem (movie_description) {
    Alert.alert(movie_description);
    }

    SaveData = () =>
    {
        const movieData = {
            UrlImage : this.state.UrlImage,
            movie_desc : this.state.movie_desc
        };

        AsyncStorage.setItem('movie',JSON.stringify(movieData));
    }

  ShowMovies = () =>{
    return fetch('https://uncoiled-crust.000webhostapp.com/api/movies_db.php')
    .then((response) => response.json())
    .then((responseJson) => {
        const result = responseJson.map((value, index) => ({
            ...value,
            isFavourite: 0
        }))
        
      this.setState({
        isLoading: false,
        dataSource: responseJson
      }, function() {
        // In this block you can do something with new state.
      });
    })
    .catch((error) => {
      console.error(error);
    });
  }
  
  componentWillMount()
  {
    const { movie_desc, UrlImage, favorite } = this.props;
    this.setState({ movie_desc, UrlImage, favorite });
  }

  SelectItem(movie_desc){
      Alert.alert(movie_desc);
  }

  componentWillUpdate() {
    LayoutAnimation.easeInEaseOut();
}


  componentDidMount(){
      this.ShowMovies();
  }

  FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: .5,
          width: "100%",
          backgroundColor: "#000",
        }}
      />
    );
  }

  changeisFavorite = (item, index) => {
    let arr = [...this.state.dataSource]
    arr[index].isFavorite = item.isFavorite == 1 ? 0:1;
    this.setState({ dataSource: arr });
}
  

  render() 
  {
    const { movie_desc, UrlImage, favorite } = this.state;
        return (
            <View style={styles.MainContainer}>
            <FlatList
            data={ this.state.dataSource }
            ItemSeparatorComponent = {this.FlatListItemSeparator}
            renderItem={({item,index}) => 
                <View style={{flex:1, flexDirection: 'row'}}>
                    <Icon
                        name={item.isFavourite == 1 ? 'heart' : 'heart-o'}
                        color={item.isFavourite == 1 ? '#F44336' : 'rgb(50, 50, 50)'}
                        size={30}
                        style={{ marginBottom: 10, marginTop: 20 }}
                        onPress={() => this.changeisFavorite(item, index)}
                    />
                    <Image source = {{ uri: item.url_image}} style={styles.imageView} />
                    <Text style={styles.textView} >{item.movie_description}</Text>
                </View>
                }
            />
            </View>
        );
  }
}


const styles = StyleSheet.create({
    MainContainer :{
     
        justifyContent: 'center',
        flex:1,
        margin: 5,
        marginTop: (Platform.OS === 'ios') ? 20 : 0,
    },
    imageView: {
        width: '50%',
        height: 350 ,
        margin: 7,
        borderRadius : 7
     
    },
    textView: {
        width:'50%', 
        textAlignVertical:'center',
        padding:10,
        color: '#000'
     
    }
    });

它只是静态的。什么都不做。

Answer 1

在 ShowMovies 函数中添加 isFavorite 状态或在数据库中添加状态字段

const result = responseJson.map((value, index) => ({
                ...value,
                isFavourite: 0
            }))

 this.setState({
        isLoading: false,
        dataSource: result
      }

在 Flatlist 渲染项目中使用 isFavorite sataus

   renderItem={({item, index}) => 
                <View style={{flex:1, flexDirection: 'row'}}>
                    <Icon
                        name={item.isFavorite == 1 ? 'heart' : 'heart-o'}
                        color={item.isFavorite == 1  ? '#F44336' : 'rgb(50, 50, 50)'}
                        size={30}
                        style={{ marginBottom: 10, marginTop: 20 }}
                        onPress={() => this.changeisFavorite(item, index)}
                    />
                    <Image source = {{ uri: item.url_image}} style={styles.imageView} />
                    <Text style={styles.textView} >{item.movie_description}</Text>
                </View>
                }

OnClick 最喜欢的图标

changeisFavorite = (item, index) => {
        let arr = [...this.state.dataSource]
        arr[index].isFavorite = item.isFavorite == 1 ? 0:1;
        this.setState({ dataSource: arr });
    }

Flatlist 为收藏夹选择全部，而不是一个

Flatlist Selects all for Favourites, instead of One

rest

react-native

react-native-flatlist