Javascript Can'；t使用数组内部状态初始化React复选框

因此，我正在处理一个表，其中一列是复选框。这些复选框原始的“选中”值是根据我将从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;

import React，{Component}来自“React”；
从“react-table-6”导入ReactTable；
导入“react-table-6/react-table.css”；
导入“/BUTable.styles.css”
从“antd”导入{排版}；
类BUTable扩展组件{
构造函数（）{
超级（）；
此.state={
加载：对，
时间戳：“”，
selectAll:false，
数据：[]，
SMScheckedOrigin:[]，
SMSchecked:[对，对，对，错]，
NFC检查：[]，
};
this.handleChangeSMS=this.handleChangeSMS.bind（this）；
this.handleSingleCheckboxChangeSMS=this.handleSingleCheckboxChangeSMS.bind(
这
);
}
//全选
handleChangeSMS=（）=>{
控制台日志（“hi”）；
var selectAll=！this.state.selectAll；
this.setState（{selectAll:selectAll}）；
var checkedCopy=[]；
this.state.data.forEach（函数（e，索引）{
选中Copy.push（全选）；
});
这是我的国家({
SMSchecked:已检查副本
});
};
handleSingleCheckboxChangeSMS=（索引）=>{
控制台日志（索引）；
var checkedCopy=this.state.SMSchecked；
checkedCopy[index]=！this.state.SMSchecked[index]；
如果（checkedCopy[索引]==错误）{
this.setState（{selectAll:false}）；
}
这是我的国家({
SMSchecked:已检查副本
});
};
componentDidMount（）{
设data2=[]；
for（设i=1；i
),
单元格：行=>(
this.handlesinglecheckboxchangesm（row.index）}
/>
),
宽度：80，
可排序：false，
可过滤：false，
可调整大小：false，
类名：“对”
},
{
标题：state=>(
NFC
this.handleChangeSMS（state.sortedData）}
选中={this.state.selectAll}
/>
),
单元格：行=>(
this.handlesinglecheckboxchangesm（row.index）}
/>
),
宽度：80，
可排序：false，
可过滤：false，
可调整大小：false，
类名：“对”
},
]}
className=“-striped”
/>
);
}
}
导出默认可分配的；

在渲染单元格的部分，我将checked设置为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)}
                  />
                ),

单元格：行=>(
this.handlesinglecheckboxchangesm（row.index）}
/>
),

看起来您正在覆盖默认值。检查以下行：

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
    });

请查看此处的工作示例：