Я пытаюсь использовать текущее выбранное значение в раскрывающемся списке. Я определил его как переменную "name" здесь, чтобы передать API в качестве параметра запроса. Я получаю имя не определенное здесь. Вызов api должен динамически меняться в зависимости от значения раскрывающегося списка
axios.get('/api/search/a', {
params: {
name: {name}
}
}
Полный код:
import React from 'react';
import axios from 'axios';
import { Bar } from "react-chartjs-2";
import {Box} from "@material-ui/core";
class test extends React.Component {
constructor(props) {
super(props);
this.state = {
data : [],
isLoading: true,
name:""
};
}
componentDidMount() {
axios.get('/api/search/a', {
params: {
name: {name}
}
}
).then(response => response.data)
.then(responsePayload => {
var dts = [];
var xds = [];
var yds = [];
for (var index = 0; index < responsePayload.length; index++) {
var dt = responsePayload[index].timestamp;
var dts = new Date(dt);
var shortMonthName = new Intl.DateTimeFormat("en-US", { month: "short" }).format;
var shortName = shortMonthName(date);
var day = dt.substring(8,10);
dts.push(shortName + " " + day);
xds.push(responsePayload[index].gg);
yds.push(responsePayload[index].kk);
}
this.setState({
data: {
labels: dts,
datasets: [
{
label: 'XXX',
backgroundColor: 'rgba(154,205,50,0.8)',
borderColor: 'rgba(154,205,50,1)',
borderWidth: 1,
hoverBackgroundColor: 'rgba(154,205,50,0.5)',
hoverBorderColor: 'rgba(154,205,50,0.8)',
data: xds
},
{
label: 'YYY',
backgroundColor: 'rgba(255,0,0,0.8)',
borderColor: 'rgba(255,0,0,1)',
borderWidth: 1,
hoverBackgroundColor: 'rgba(255,0,0,0.4)',
hoverBorderColor: 'rgba(255,0,0,1)',
data: yds
}
]
},
isLoading: false
});
});
}
render() {
const {isLoading} = this.state;
if (isLoading) {
return <Box boxShadow={2} className={this.props.className} style={{ width: "750px", height: "242px" }}><coral-wait></coral-wait></Box>;
}
const options = {
responsive: true,
legend: {
display: true,
position:'bottom',
labels: {
fontSize: 2,
boxWidth: 8
}
},
title:{
display:true,
text:'MTTT',
fontSize:16
},
type: "bar",
maintainAspectRatio: true,
scales: {
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: 'Day',
fontSize: 14
},
ticks: {
fontSize: 12
}
}],
yAxes: [{
stacked: true,
ticks: {
stepSize: 50000,
fontSize: 12
},
scaleLabel: {
display: true,
labelString: 'TTTTT',
fontSize: 14
}
}]
},
legend:{
display:true,
position:'bottom',
labels: {
fontSize: 10,
boxWidth: 12
}
}
};
return (
<div>
<Box boxShadow={2} className={this.props.className}>
<Bar
data={this.state.data}
options={options}
/>
</Box>
<div>
<div>
<select id="dropdown" onChange={this.handleDropdownChange}>
<option value="N/A">N/A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div>Selected value is : {this.state.selectValue}</div>
name={this.state.selectValue};
</div>
</div>
);
}
}
export default test;