Switchコンポーネントを別個の列としてTableコンポーネントに統合し、両方に別個の状態を設定するにはどうすればよいですか？

私はReact.jsを初めて使用しますが、これまでのところ、それが大好きです。ただし、ステートフルコンポーネントの概念についてはまだ混乱しています。Bootstrapテーブルを使用してテーブルを作成していますが、データ取得のGETリクエストは問題なく機能しました。私はスイッチコンポーネントにもmaterial-uilibを使用しています（ここで車輪の再発明をする必要はありません！）

ただし、現在、テーブルの各行のスイッチとなる新しい列を統合しようとしています。これを切り替えると、スイッチのブール値がtrue / falseに変更され、PUTリクエストが送信されます。バックエンド。このUI部分を機能させることができないため、PUTリクエストをまだ作成していません。ここに私のこれまでのコード、およびdumbyのUIの作品があるが、私はで定義されたレンダリングステートフル統合する方法がわからないNodeTableContainerの<SwitchState/>とSwitchState()で私の定義に、selectionRenderer: Switches私の中NodeTableの成分。ステートフルレンダリングは、基本的に独自の独立したコンポーネントとして、テーブルの下にトグルスイッチをレンダリングします。しかし、私はそのトグルスイッチコンポーネントをに統合したいconst selectRow = {mode: 'checkbox', clickToSelect: true,selectionRenderer: Switches}。これが私のコードです、そして私が私の問題をうまく説明したことを願っています。私は際限なくグーグルで検索しましたが、私自身の無知が私が必要な答えを見つけるのを妨げていると信じています。

Table Component (NodeTable)

import React from 'react';
import {
    Row,
    Col,
    Card,
    CardBody,
} from 'reactstrap';
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider, { Search, CSVExport, ColumnToggle } from 'react-bootstrap-table2-toolkit';
import paginationFactory from 'react-bootstrap-table2-paginator';
import 'chartjs-plugin-colorschemes';
import Switches from './Switch'

    const columns = OMIT
    
    const defaultSorted = [
        {
            dataField: 'id',
            order: 'asc',
        },
    ]
    const TableWithSearch = (props) => {
    
    
        const { SearchBar } = Search;
        const { ExportCSVButton } = CSVExport;
    
        const selectRow = {
            mode: 'checkbox',
            clickToSelect: true,
            selectionRenderer: Switches
    
        }
        return (
            <Card>
                <CardBody>
                    <h4 className="header-title">OMIT</h4>
                    <p className="text-muted font-14 mb-4">OMIT</p>
    
                    <ToolkitProvider
                        bootstrap4
                        keyField="fqn"
                        data={props.data}
                        columns={columns}
                        columnToggle
                        search
                        exportCSV={{ onlyExportFiltered: true, exportAll: false }}>
                        {props => (
                            <React.Fragment>
                                <Row>
                                    <Col>
                                        <SearchBar {...props.searchProps} />
    
                                    </Col>
                                    <Col className="text-right">
                                        <ExportCSVButton {...props.csvProps} className="btn btn-primary">
                                            Export CSV
                                        </ExportCSVButton>
    
                                    </Col>
                                </Row>
    
                                <BootstrapTable
                                    {...props.baseProps}
                                    bordered={false}
                                    defaultSorted={defaultSorted}
                                    pagination={paginationFactory({ sizePerPage: 5 })}
                                    selectRow={selectRow}
                                    wrapperClasses="table-responsive"
                                />
                            </React.Fragment>
                        )}
                    </ToolkitProvider>
                </CardBody>
            </Card>
        );
    };
    
    export default TableWithSearch;

Switch Component

    // @flow
import React from 'react';
import 'chartjs-plugin-colorschemes';
import './Switch.css'
import Switch from '@material-ui/core/Switch';

export default function Switches({ isOn, handleToggle }) {

    return (
        <div>
            <Switch
                checked={isOn}
                onChange={handleToggle}
                name="checkedA"
                inputProps={{ 'aria-label': 'secondary checkbox' }}
            />
        </div>
    );
}

Parent Component (NodeTableContainer)

    import axios from 'axios';
    import React, { Component, useState } from 'react';
    import Switch from './Switch';
    import App from './index';
    
    
    export default class MainComp extends React.Component {
    
    
        state = {
            nodesData: [],
            chartRef: [],
            conn: [],
            switchstate: [],
        }
        componentDidMount() {
            axios.get('OMIT')
                .then(res => {
                    const nodestate = res.data.map(x => x.nodestate);
                    for (var i = 0; i < nodestate.length; i++) {
                        if (nodestate[i] == 'up') {
    
                            nodestate[i] = true;
                        }
                        else {
                            nodestate[i] = false;
                        }
                    }
                    this.setState({ nodesData: res.data, switchstate: nodestate });
    
    
                })
    
        }
        render() {
            return (
                < >

                   <App data={this.state.nodesData} checked={this.state.switchstate} />,
                   <SwitchState />
                </>
        )
    }
}
function SwitchState() {
    const [value, setValue] = useState(false);
    console.log(value)
    return (
        <div className="app">
            <Switch
                isOn={value}
                onColor="#EF476F"
                handleToggle={() => setValue(!value)}
            />
        </div>
    );
}

また、ブール状態の変化を示すログが表示されるまで、SwitchStateコンポーネントはダンビー形式になっています。また、nodestate中にNodeTableContainer同じ状態データを介してデータを引っ張っで私の哀れな試みでした。ご覧のとおり、これは機能しません。これを理解できたら、適切に状態を構築します。そうしないと、すばらしい個人が私を助けてくれます。繰り返しになりますが、私はここで私の無知を示​​しているので、もっと簡単な方法がある場合、またはこれに奇妙な種類のライブラリを使用している場合は、私に知らせてください。私は学び、繁栄したいです。あなたがあなた自身の解決策を持っているなら、それは完全に異なる味です、私はあなたにそれを共有することを願っています！皆さん、ありがとうございました！