Cochez une colonne d'affichage dans une colonne de tableau connue

import React, {
    useEffect, useState} from 'react';
import {
    Table,Checkbox,} from 'antd'
const columns = [
    {
    
        title: 'ID',
        dataIndex: 'user_id',
        key: 'user_id',
        width: 100,
    },
    {
    
        title: 'Un surnom.',
        dataIndex: 'nickname',
        key: 'nickname',
        width: 150,
    },
    {
    
        title: 'Numéro de téléphone portable',
        dataIndex: 'phone',
        key: 'phone',
        width: 150,
    },
    {
    
        title: 'Solde',
        dataIndex: 'balance',
        key: 'balance',
        width: 150,
    },
    {
    
        title: 'Frais de service de la plateforme',
        dataIndex: 'service_charge',
        key: 'service_charge',
        width: 150,
    },
    {
    
        title: 'Sexe',
        dataIndex: 'sex',
        key: 'sex',
        width: 150,
    },
    {
    
        title: 'Jours de connexion consécutifs',
        dataIndex: 'login_day',
        key: 'login_day',
        width: 200,
    },
    {
    
        title: 'Nombre maximum de jours consécutifs de connexion',
        dataIndex: 'login_bigday',
        key: 'login_bigday',
        width: 200,
    },
    {
    
        title: 'Heure de connexion',
        dataIndex: 'login_time',
        key: 'login_time',
        width: 200,
    },
    {
    
        title: 'Temps d'ajout',
        dataIndex: 'join_time',
        key: 'join_time',
        width: 200,
    },
    {
    
        title: 'Statut',
        dataIndex: 'status',
        key: 'status',
        width: 150,
    },
]

//Descendez.
const plainOptions = [
    {
     label: 'ID', value:'user_id'  },
    {
     label: 'Un surnom.', value: 'nickname'},
    {
     label: 'Numéro de téléphone portable', value:'phone' },
    {
     label: 'Solde', value: 'balance'},
    {
     label: 'Frais de service de la plateforme', value:'service_charge'},
    {
     label: 'Sexe', value: 'sex' },
    {
     label: 'Jours de connexion consécutifs', value:'login_day'  },
    {
     label: ' Nombre maximal de jours consécutifs de débarquement ', value: 'login_bigday'},
    {
     label: 'Heure de connexion', value:'login_time' },
    {
     label: 'Temps d'ajout', value: 'join_time'},
    {
     label: 'Statut', value:'status'},
];

const TableTreeChange = () => {
    
    //Prenez levalue Configuré pour répondre à la mise à jour de l'interface 
    const [selectColum,setSelectColum]=useState(columns)
    // Original par défaut sélectionné valueValeur
    const [checkedList, setCheckedList] = useState(['user_id']);

    //  Mettez les sélections multiples que vous avez cochées dans un tableau 
    const onChange = (list) => {
    
        setCheckedList(list)
    };
    useEffect(() => {
    
        console.log(checkedList,66666666666666666)
        //Utilisation de la doublefor Boucle à sélectionner value Et dans les colonnes du tableau keyLes valeurs sont liées
        let newList=[]
        for (let i = 0; i < checkedList.length; i++){
    
            for (let j = 0; j < columns.length; j++){
    
                if (checkedList[i] == columns[j].key) {
    
                    newList.push(columns[j]);
                }
            }
        }


        // La section suivante du Code est destinée à ajouter une colonne d'action fixe au tableau , Si vous n'avez pas besoin d'ignorer 
        newList.push({
    
            title: 'Fonctionnement',
            key: 'action',
            render: (text, record) => (
                <span>
                    <a>edit</a>
                </span>
            ),
            width: 100,
            fixed: 'right',
        })
        setSelectColum(newList)
    }, [checkedList])
    return (
        <div>
            <Table
                columns={
    selectColum}
                pagination={
    false}
            />
            <Checkbox.Group options={
    plainOptions} value={
    checkedList} onChange={
    onChange} />
        </div>
    );
};

export default TableTreeChange;