Компонент выбора даты реагирования сбоя с ошибкой с ошибкой неверный вызов крючка ⇐ Javascript

[Anonymous]

Я пытаюсь использовать React-Date Picker NPM-модуль, а ниже-мой код.
Использование DatePicker в компоненте класса сбой с ошибкой неверной крюка.import React, { Component, useState } from 'react';
import logo from './logo.svg';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withRouter } from 'react-router-dom';
import './App.css';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.css';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import Select from 'react-select';
import cellEditFactory from 'react-bootstrap-table2-editor';

import 'react-datepicker/dist/react-datepicker.css';

import DatePicker from 'react-date-picker';
import moment from 'moment';

// class component

class App extends React.Component {
constructor(props, context) {
super(props);
this.state = {
columns: [],
schemaData: [],
selectedDate: null,
submittedValue: [],
columnsList: [],
schemaDataOriginal: [],
selectedOption: null,
selectedOptionNext: null,
options: [{ value: null, label: 'Select...' }],
optionsNext: [{ value: null, label: 'Select...' }],
colStyle: {
backgroundColor: '#5F9EA0',
width: '200px',
fontSize: '13px',
},
paginationOption: {
custom: true,
marginLeft: '35px',
},
};
this.handleDateChange = this.handleDateChange.bind(this);

this.state.selectStyles = {
menuList: (styles) => ({
...styles,
background: 'white',
}),
option: (styles, { isFocused, isSelected }) => ({
...styles,
background: isFocused ? '#5F9EA0' : isSelected ? '#5F9EA0' : undefined,
zIndex: 1,
}),
menu: (base) => ({
...base,
zIndex: 100,
}),
};
}
fetchEdSource(tableNameFirst) {
var paramKey = {};
paramKey['tableNameFirst'] = tableNameFirst;

axios
.get('/apiEdSource', { responseType: 'json', params: paramKey })
.then((res) => {
this.setState({ schemaDataOriginal: res.data });
this.state.schemaData = this.state.schemaDataOriginal;
var sb = [];
var ot = [];
var otn = [];
this.state.columnsList = Object.keys(this.state.schemaDataOriginal[0]);
Object.keys(this.state.schemaDataOriginal[0]).map((key) => {
sb.push({
dataField: key,
text: key,
sort: true,
headerStyle: this.state.colStyle,
});
});
this.state.columns = sb;
this.state.schemaDataOriginal.map((arrayData) => {
ot.push({
value: arrayData['SOURCE_SYSTEM'],
label: arrayData['SOURCE_SYSTEM'],
});
});

this.state.schemaDataOriginal.map((arrayData) => {
otn.push({
value: arrayData['TABLE_NAME'],
label: arrayData['TABLE_NAME'],
});
});

const filtered = ot.filter(function({ value, label }) {
const key = `${value}${label}`;

return !this.has(key) && this.add(key);
}, new Set());
console.log(this.state.options);
for (var i = 0; i < filtered.length; i++) {
this.state.options.push(filtered);
}

const filteredotn = otn.filter(function({ value, label }) {
const key = `${value}${label}`;

return !this.has(key) && this.add(key);
}, new Set());
console.log(this.state.optionsNext);

for (var i = 0; i < filteredotn.length; i++) {
this.state.optionsNext.push(filteredotn);
}
})
.catch((e) => {
console.log(e);
});
}

updateSelectList(selectedOption) {
var otn = [];
this.state.optionsNext = [];

this.state.schemaDataOriginal.map((arrayData) => {
if (
selectedOption !== null &&
selectedOption['label'] == arrayData['SOURCE_SYSTEM']
) {
otn.push({
value: arrayData['TABLE_NAME'],
label: arrayData['TABLE_NAME'],
});
} else if (selectedOption['label'] == 'Select...') {
otn.push({
value: arrayData['TABLE_NAME'],
label: arrayData['TABLE_NAME'],
});
}
});

for (var i = 0; i < otn.length; i++) {
this.state.optionsNext.push(otn);
}
this.state.optionsNext.push({ value: null, label: 'Select...' });

const filteredotn = this.state.optionsNext.filter(function({
value,
label,
}) {
const key = `${value}${label}`;

return !this.has(key) && this.add(key);
},
new Set());

this.state.optionsNext = filteredotn;
}

updateTableList(selectedOption, selectedOptionNext) {
var tempSchemaData = [];
this.state.schemaDataOriginal.map((arrayData) => {
if (selectedOption !== null || this.state.selectedOptionNext !== null) {
if (this.state.selectedOptionNext == null) {
if (selectedOption['label'] == arrayData['SOURCE_SYSTEM']) {
tempSchemaData.push(arrayData);
} else if (selectedOption['label'] == 'Select...') {
this.state.schemaData = this.state.schemaDataOriginal;
}
} else if (
this.state.selectedOptionNext !== null &&
(selectedOption['label'] == arrayData['SOURCE_SYSTEM'] &&
this.state.selectedOptionNext['label'] == arrayData['TABLE_NAME'])
) {
tempSchemaData.push(arrayData);
} else if (selectedOption['label'] == 'Select...') {
this.state.schemaData = this.state.schemaDataOriginal;
}
}
if (selectedOption['label'] !== 'Select...') {
this.state.schemaData = tempSchemaData;
}
});
}

handleChange = (selectedOption) => {
this.setState({ selectedOption }, () =>
console.log(`Option selected:`, this.state.selectedOption),
);
this.state.selectedOption = selectedOption;
this.updateSelectList(selectedOption);
this.updateTableList(
this.state.selectedOption,
this.state.selectedOptionNext,
);
};

handleChangeNext = (selectedOptionNext) => {
this.setState({ selectedOptionNext }, () =>
console.log(`Option selected:`, this.state.selectedOptionNext),
);
this.state.selectedOptionNext = selectedOptionNext;
this.updateTableList(
this.state.selectedOption,
this.state.selectedOptionNext,
);
};

submitCell = () => {
var paramKey = {};
// paramKey['newValue']= this.state.submittedValue[0]["newValue"];
// paramKey['fieldUpdated']= this.state.submittedValue[0]["TABLE_ID"]["dataField"];
// paramKey['TABLE_ID']= this.state.submittedValue[0]["fieldUpdated"]["TABLE_ID"];
if (this.state.submittedValue.length !== 0) {
var params = new URLSearchParams();
// for (var i=0; i {})
.catch((e) => {
console.log(e);
});
}
this.state.submittedValue = [];
};
saveCell = (oldValue, newValue, fieldUpdated, TABLE_ID) => {
this.state.submittedValue.push({
oldValue: oldValue,
newValue: newValue,
fieldUpdated: fieldUpdated,
TABLE_ID: TABLE_ID,
});
};

handleDateChange(date) {
this.setState({
selectedDate: date,
});
}

//here is the render function

render() {
const { selectedOption } = this.state;
const { selectedOptionNext } = this.state;
const { selectedDate } = this.state;

return (

{this.state.columns.length !== 0 ? (




this.handleDateChange(date)}
/>

{
this.submitCell(this.state);
}}
>
SUBMIT

{
this.saveCell(oldValue, newValue, row, column);
},
})}
/>

) : (

{' '}

• onClick={() => {
  this.fetchEdSource('[ODIN_WORK.[dbo].[ed_source_table]');
  }}
  >
  
  ED Source Table
  

)}

);
}
}

export default App;
< /code>
Этот код выбрасывает ошибку: < /p>
Введите описание изображения здесь < /p>
Прикреплено выше полного, которое представляет собой веб-страницу для использования React-bootstrap для отображения таблицы и реагирования для раскрывающихся. Ошибка состоит в том, чтобы включить дату реагирования

Подробнее здесь: https://stackoverflow.com/questions/795 ... -hook-call