如何解决在获取选项后反应挂钩未设置选择值
- 我正在使用组件安装上的api调用来获取测试套件列表。 Api按时间顺序返回列表。
- 将它们设置为选择下拉菜单(Material-UI)的选项。
- 然后将所选选项设置为最新的testSuite,并使用其ID获取相应的testSuite数据。
- 成功检索数据并显示饼图。
- Api调用运行良好,React开发工具显示了正确设置的selectedTestSuite值。但是DOM在选择下拉列表中未显示选择内容。
有人可以告知我这段代码在做什么错误吗?预先感谢。
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { Doughnut } from 'react-chartjs-2';
import { makeStyles } from '@material-ui/styles';
import axios from 'axios';
import { useSpring,animated } from 'react-spring';
import '../../Dashboard.css';
import MenuItem from '@material-ui/core/MenuItem';
import {
Card,CardHeader,CardContent,Divider,TextField,} from '@material-ui/core';
import CircularProgress from '@material-ui/core/CircularProgress';
const useStyles = makeStyles(() => ({
circularloader: {
position: 'absolute',top: '50%',left: '50%',transform: 'translate(-50%,-50%)',},actions: {
justifyContent: 'flex-end',inputField: {
width: '150px',}));
const TestSuiteVsScanCount = (props) => {
const { className,...rest } = props;
const classes = useStyles();
const [doughData,setDoughData] = useState([]);
const [dataLoadedFlag,setDataLoadedFlag] = useState(false);
const [testSuites,setTestSuites] = useState([]);
const [selectedTestSuite,setSelectedTestSuite] = useState({});
useEffect(() => {
function getTestSuites() {
axios.get('http://localhost:3000/api/v1/testsuite/12').then((resp) => {
setTestSuites(resp.data.reverse());
});
}
getTestSuites();
},[]);
useEffect(() => {
if (testSuites.length > 0) {
setSelectedTestSuite(() => {
return {
type: testSuites[0].TestSuiteName,id: testSuites[0].TestSuiteId,};
});
}
},[testSuites]);
useEffect(() => {
function getTestSuiteData() {
let doughData = [];
if (selectedTestSuite.id) {
axios
.get(
'http://localhost:3000/api/v1/summary/piechart/12?days=30&testsuiteid=' +
selectedTestSuite.id,)
.then((resp) => {
resp.data.forEach((test) => {
doughData = [test.TestCount,test.ScanCount];
});
setDoughData({
labels: ['Test Count','Scan Count'],datasets: [
{
data: doughData,backgroundColor: ['#FF6384','#36A2EB'],hoverBackgroundColor: ['#FF6384',],});
setDataLoadedFlag(true);
});
}
}
getTestSuiteData();
},[selectedTestSuite]);
const ChangeType = (id) => {
testSuites.forEach((suite) => {
if (suite.TestSuiteId === id) {
setSelectedTestSuite({
type: suite.TestSuiteName,id: suite.TestSuiteId,});
}
});
};
return (
<Card {...rest} className={clsx(classes.root,className)}>
<CardHeader
action={
<TextField
select
label="Select Test Suite"
placeholder="Select Tests"
value={selectedTestSuite.id}
className={classes.inputField}
name="tests"
onChange={(event) => ChangeType(event.target.value)}
variant="outlined"
InputLabelProps={{
shrink: true,}}
>
{testSuites.map((testSuite) => (
<MenuItem
key={testSuite.TestSuiteId}
value={testSuite.TestSuiteId}
>
{testSuite.TestSuiteName}
</MenuItem>
))}
</TextField>
}
title="Test Suite vs Scan Count"
/>
<Divider />
<CardContent>
<div>
{dataLoadedFlag ? (
<Doughnut data={doughData} />
) : (
<CircularProgress
thickness="1.0"
size={100}
className={classes.circularloader}
/>
)}
</div>
</CardContent>
<Divider />
</Card>
);
};
TestSuiteVsScanCount.propTypes = {
className: PropTypes.string,};
export default TestSuiteVsScanCount;
解决方法
在同事的帮助下,我将selectedTestSuite
的初始状态设置为{type:'',id:0}
而不是{}
,从而解决了这个问题。
更改了此
const [selectedTestSuite,setSelectedTestSuite] = useState({});
对此
const [selectedTestSuite,setSelectedTestSuite] = useState({type:'',id:0});
但是我不确定为什么这样。
,我认为主要的问题是,当您将value
传递给TextField
的{{1}}到undefined
组件时,TextField
组件将假定这是一个不受控制的组件。
将selectedTestSuite
的初始状态设置为{}
时,value
的{{1}}将会是不确定的。您可以在https://material-ui.com/api/text-field/
selectedTestSuite.id
API参考。版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。