Не удается инициализировать флажки React массивом внутри состояния

Question

Итак, я работаю над таблицей, в которой один из столбцов является флажком. Исходные «отмеченные» значения этих флажков инициализируются на основе данных, которые я получаю от API. Позже пользователь сможет установить / снять эти флажки или отметить все сразу, щелкнув флажок в заголовке. В настоящее время я использую поддельные данные, просто хочу, чтобы функция работала в первую очередь. Ниже мой текущий код:

import React, { Component } from "react";
import ReactTable from "react-table-6";
import "react-table-6/react-table.css";
import "./BUTable.styles.css"
import { Typography } from 'antd';

class BUTable extends Component {
  constructor() {
    super();
    this.state = {
      loading: true,
      timestamp: "",
      selectAll: false,
      data: [],
      SMScheckedOrigin: [],
      SMSchecked: [true, true, true, false],
      NFCchecked: [],
    };
    this.handleChangeSMS = this.handleChangeSMS.bind(this);
    this.handleSingleCheckboxChangeSMS = this.handleSingleCheckboxChangeSMS.bind(
      this
    );
  }

  //for select all
  handleChangeSMS = () => {
    console.log("hi");
    var selectAll = !this.state.selectAll;
    this.setState({ selectAll: selectAll });
    var checkedCopy = [];
    this.state.data.forEach(function(e, index) {
      checkedCopy.push(selectAll);
    });
    this.setState({
      SMSchecked: checkedCopy
    });
  };

  handleSingleCheckboxChangeSMS = (index) => {
    console.log(index);

    var checkedCopy = this.state.SMSchecked;
    checkedCopy[index] = !this.state.SMSchecked[index];
    if (checkedCopy[index] === false) {
      this.setState({ selectAll: false });
    }

    this.setState({
      SMSchecked: checkedCopy
    });
  };

  componentDidMount() {
    let data2 = [];
    for (let i = 1; i <= 3; i++) {
        this.state.SMScheckedOrigin.push({
             eventCode: 'F'+i,
             sms: 'true'
         })
        data2.push ({
            key: i,
            seasonCode: 'F19',
            eventCode: 'F'+i,
            eventName: 'Football vs Washington State',
            sms: 'false',
            nfc: 'true',
        })
    }
    this.state.SMScheckedOrigin.push({eventCode: 'F01', sms: 'false'});
    // this.state.SMScheckedOrigin.push({eventCode: 'F02', sms: 'true'});
    data2.push({
        key: 16,
        seasonCode: 'F14',
        eventCode: 'F01',
        eventName: 'Basketball vs Michigan State',
        sms: 'false', 
        nfc: 'false', 
       });
    // data2.push({
    //     key: 17,
    //     seasonCode: 'F13',
    //     eventCode: 'F05',
    //     eventName: 'Baseball vs Missouri State',
    //     sms: 'true', 
    //     nfc: 'false', 
    //   });


    var checkedCopy = [];
    var selectAll = this.state.selectAll;
    data2.forEach(function(e, index) {
      checkedCopy.push(selectAll);
    });

    this.setState({
      data: data2,
      SMSchecked: checkedCopy,
      selectAll: selectAll
    });
    //console.log ('origin' + this.state.SMScheckedOrigin);
  }

  render() {
    console.log(this.state);
    return (
      <div>
        <div className="container">
          <ReactTable
            data={this.state.data}
            filterable = {false}
            defaultCanSort
            showPagination={false}
            minRows= {0}
            resizable= {true}
            defaultPageSize = {400}
            //defaultPageSize={this.state.data.length}
            columns={[
              {
                Header: (<Typography.Text ellipsis={true}> Season Code </Typography.Text>),
                accessor: "seasonCode",
                width: 120,
                resizable: false,
                className: "table-hd"
              },
              {
                Header: (<Typography.Text ellipsis={true}> Event Code </Typography.Text>),
                accessor: "eventCode",
                width: 110,
                resizable: false,
                className: "table-hd"
              },
              {
                Header: (<Typography.Text ellipsis={true}> Event Name </Typography.Text>),
                accessor: "eventName",
                resizable: false,
                className: "table-hd"
              },
              {
                Header: state => (
                  <div className = "check-box-header">
                  <span>SMS</span> &nbsp; 
                  <input
                    type="checkbox"
                    onChange={() => this.handleChangeSMS(state.sortedData)}
                    checked={this.state.selectAll}
                  /> </div>
                ),
                Cell: row => (
                  <input
                    type="checkbox"
                    //defaultChecked = {this.state.SMScheckedOrigin[row.index].sms}
                    // default here by pre-set array?
                    checked={this.state.SMSchecked[row.index]}
                    onChange={() => this.handleSingleCheckboxChangeSMS(row.index)}
                  />
                ),
                width: 80,
                sortable: false,
                filterable: false,
                resizable: false,
                className: "right"
              },
              {
                Header: state => (
                  <div className = "check-box-header">
                  <span>NFC</span> &nbsp; 
                  <input
                    type="checkbox"
                    onChange={() => this.handleChangeSMS(state.sortedData)}
                    checked={this.state.selectAll}
                  />
                  </div>
                ),
                Cell: row => (
                    <input
                    type="checkbox"
                    defaultChecked={this.state.SMSchecked[row.index]}
                    checked={this.state.SMSchecked[row.index]}
                    onChange={() => this.handleSingleCheckboxChangeSMS(row.index)}
                  />
                ),
                width: 80,
                sortable: false,
                filterable: false,
                resizable: false,
                className: "right"
              },
            ]}
            className="-striped "
          />
        </div>
      </div>
    );
  }
}

export default BUTable;

В той части, где я визуализирую ячейку, я установил check в this.state.SMSchecked [row.index], который я инициализировал с помощью [true, true, true, false ] в состоянии, но я не знаю, почему мои флажки не инициализированы. Все они не отмечены. Как я могу это исправить? Спасибо!

                Cell: row => (
                  <input
                    type="checkbox"
                    //defaultChecked={Origin[row.index].sms === 'true'}
                    //defaultChecked = {this.state.SMScheckedOrigin[row.index].sms}
                    // default here by pre-set array?
                    checked={this.state.SMSchecked[row.index]}
                    onChange={() => this.handleSingleCheckboxChangeSMS(row.index)}
                  />
                ),

Answer 1

Похоже, вы меняете значения по умолчанию. Проверьте строки ниже:

var checkedCopy = [];
    var selectAll = this.state.selectAll; // selectAll is false in constructor
    data2.forEach(function(e, index) {
      checkedCopy.push(selectAll); // contains now [false, false, false, false]   
    });

    this.setState({
      data: data2,
      //SMSchecked: checkedCopy, // Here you are overriding your initial values
      selectAll: selectAll
    });

Посмотрите рабочий пример здесь: https://stackblitz.com/edit/react-pplfzh?file=index.js