时间戳

首页 > 解决方案 > 喜欢和增量按钮在 FlatList 中不起作用

javascript - 喜欢和增量按钮在 FlatList 中不起作用

问题描述

喜欢和增量按钮在里面不起作用FlatList

这是我的构造函数、增量和类似函数：

constructor(props){
    super(props);
    this.state = {
        count: true,
        count1: 0,
    };
}
onlike = () => {
    this.setState(state => ({
        count: !state.count
    }));
}
_incrementCountNew = () => {
    let newCount1 = this.state.count1 + 1
    this.setState({
        count1: newCount1
    })
}

<FlatList
    data={data}[
        renderItem = {({ item }) => (
            <View style={styles.Text2}>
                <Image
                    source={item.image}
                    style={{ width: 329, height: 250, marginRight: 0 }} />

                <Text style={{ marginLeft: 10, fontSize: 15, marginTop: 10 }}>
                    {item.content}
                </Text>

                <View style={{ marginLeft: 10, marginTop: 10, marginRight: 250, marginBottom: 1 }}>
                    <TouchableOpacity>
                        <Icon2
                            name={item.vectoricon}
                            size={20}
                            color="#b3b3b3"
                        />
                    </TouchableOpacity>
                    <Text style={{ marginLeft: 25, marginTop: -20, color: "#b3b3b3" }}>{this.state.count ? '0' : '1'}</Text>
                </View>
                <View style={{ marginLeft: 90, marginTop: -20, marginBottom: 1, marginRight: 70 }}>
                    <TouchableOpacity>
                        <Icon1
                            name={item.vectoricon1}
                            size={20}
                            color="#b3b3b3"
                            onPress={this._incrementCountNew} />
                    </TouchableOpacity>
                    <Text style={{ marginLeft: 25, marginTop: -20, color: "#b3b3b3" }}>{this.state.count1}</Text>
                </View>

                <View style={styles.lineStyle} />

                <View style={{ marginLeft: 10, marginTop: 1, marginRight: 270 }}>
                    <TouchableOpacity onPress={this._incrementCountNew}>
                        <Icon1
                            name={item.vectoricon1}
                            size={30}
                        />
                    </TouchableOpacity>
                </View>

                <View style={{ marginLeft: 60, marginTop: -30, marginBottom: 10, marginRight: 210 }}>
                    <TouchableOpacity onPress={this.onlike}>
                        <View>
                            {this.state.count ? <Icon3 name={item.vectoricon2} size={30} /> : <Icon3 name={item.vectoricon3} size={30} />}
                        </View>
                    </TouchableOpacity>
                </View>

            </View>
        )}

        keyExtractor = { this.keyExtractor } />

标签： javascriptreactjsreact-native

解决方案

因为您使用的是 FlatList，如果您的列表有自己的喜欢/不喜欢和支持计数器，您是否不希望每个项目？

如果是这种情况，那么将选票数量与您所在州的单个变量联系起来是没有意义的，对吧？

你也可以像这样改进你的增量功能。

  _incrementCountNew = () =>  { 
       this.setState({       
         count1:this.state.count1 + 1  
       })
  }

推荐阅读