个人中心
gpt4 book ai didi

javascript - 单击时将复选框的值添加到数组

转载 作者：行者123 更新时间：2023-11-29 18:50:47 24 4
gpt4 key购买 nike

我遇到这种情况，我想将 userid 传输到在 State 中定义的数组。

当我点击复选框选中它时我想这样做，当我取消选中复选框时我想从数组中删除用户标识

import React, { Component } from "react";
import { 
    View,
    Text,
    StyleSheet,
    FlatList,
    AsyncStorage
    } from "react-native";
import axios from 'axios';
import { Button, Container, Content, Header, Body, Left, Right, Title } from 'native-base';
import Icon from 'react-native-vector-icons/Ionicons';
import { List, ListItem, SearchBar, CheckBox } from "react-native-elements";
    
    // const itemId = this.props.navigation.getParam('itemId', 'NO-ID');
    // const otherParam = this.props.navigation.getParam('otherParam', 'some default value');

    class TeacherSubjectSingle extends Component{
        static navigationOptions = {
            header : null
        }
        // static navigationOptions = {
        //     headerStyle: {
        //         backgroundColor: '#8E44AD',
        //       },
        //     headerTintColor: '#fff',
            
        // }

        state = {
            class_id: null,
            userid: null,
            usertype: null,
            student_list: [],
            faq : [],
            checked: [],
        }

        componentWillMount = async () => {
            const {class_id, student_list, userid, usertype} = this.props.navigation.state.params;
            await this.setState({
                class_id : class_id,
                student_list : student_list,
                userid : userid,
                usertype : usertype,
            })
            console.log(this.state.class_id)
            var result = student_list.filter(function( obj ) {
                return obj.class_section_name == class_id;
              });
            this.setState({
                student_list: result[0]
            })
            
        }

        renderSeparator = () => {
            return (
              <View
                style={{
                  height: 1,
                  width: "100%",
                  backgroundColor: "#CED0CE",
                }}
              />
            );
        };

        checkItem = (item) => {
            const { checked } = this.state;
            console.log(item)
            if (!checked.includes(item)) {
              this.setState({ checked: [...checked, item] });
              
            } else {
              this.setState({ checked: checked.filter(a => a !== item) });
            }
            console.log(checked)
        };

        render(){
            
            return (
                <Container>
                    <Header style={{ backgroundColor: "#8E44AD" }}>
                        <Left>
                            <Button transparent onPress={()=> this.props.navigation.navigate('ClassTeacher')}>
                                <Icon name="ios-arrow-dropleft" size={24} color='white' />
                            </Button>
                        </Left>
                        <Body>
                            <Title style={{ color: "white" }}>{this.state.class_id}</Title>
                        </Body>
                        <Right>
                            {this.state.checked.length !== 0 ? <Button transparent onPress={()=> this.props.navigation.navigate('ClassTeacher')}>
                                <Text>Start Chat</Text>
                            </Button> : null}
                        </Right>
                    </Header>
                    <View style={{flex: 1, backgroundColor: '#fff'}}>
                    <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
                    <FlatList
                        data={this.state.student_list.students}
                        extraData={this.state.checked}
                        renderItem={({ item }) => (
                        <ListItem
                            // roundAvatar
                            title={<CheckBox
                            title={item.name}
                            checkedColor='#8E44AD'
                            onPress={() => this.checkItem(item.userid)}
                            checked={this.state.checked.includes(item.userid)}
                            />}
                            // subtitle={item.email}
                            // avatar={{ uri: item.picture.thumbnail }}
                            //containerStyle={{ borderBottomWidth: 0 }}
                            onPress={()=>this.props.navigation.navigate('IndividualChat', {
                            rc_id: item.userid,
                            userid: this.state.userid,
                            usertype: this.state.usertype,
                            subject_name: this.state.student_list.subject_name
                            })}
                        />
                        )}
                        keyExtractor={item => item.userid}
                        ItemSeparatorComponent={this.renderSeparator}
                        
                    />
                    </List>
                    </View>
                </Container>
            );
        }
    }
export default TeacherSubjectSingle;

const styles = StyleSheet.create({
    container:{
    flex:1,
    alignItems:'center',
    justifyContent:'center'
    }
});

这是相同的代码，我为此创建了一个函数checkItem()并且它正在运行，唯一的问题是，当我点击第一个项目时，它会输出空白数组，我选择第二项，它将返回包含第一项的数组，依此类推。请帮我解决一下，提前致谢

最佳答案

这是因为你在 setState 之后打印 this.state.checked 值，setState 是异步的，它不会立即更新状态值。您可以使用 setState 回调方法来检查更新的状态值。

这样写:

checkItem = (item) => {
    const { checked } = this.state;
    let newArr = [];

    if (!checked.includes(item)) {
        newArr = [...checked, item];
    } else {
      newArr = checked.filter(a => a !== item);
    }
    this.setState({ checked: newArr }, () => console.log('updated state', newArr))
};

查看此答案以获取有关 setState 的更多详细信息:

Why calling setState method doesn't mutate the state immediately?

关于javascript - 单击时将复选框的值添加到数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51373262/

24 4 0
文章推荐： mysql - 使用父 ID 将表连接到自身，直到没有更多行
文章推荐： javascript - NodeJS - mysql 包尊重完成 INSERT INTO...SET 后的列名称？
文章推荐： javascript - 如何取消嵌套这些 Promise？
文章推荐： java - 将 Firebase 字符串数组检索到数组
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com