Question

我正在使用组件安装上的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', '#36A2EB'],
                },
              ],
            });
            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;

Answer 1

在同事的帮助下，我将selectedTestSuite的初始状态设置为{type:'', id:0}而不是{}，从而解决了这个问题。

更改了此

const [selectedTestSuite, setSelectedTestSuite] = useState({});

对此

const [selectedTestSuite, setSelectedTestSuite] = useState({type:'', id:0});

但是我不确定为什么这样。

Answer 2

我认为主要的问题是，当您将value传递给TextField的{{1}}到undefined组件时，TextField组件将假定这是一个不受控制的组件。

将selectedTestSuite的初始状态设置为{}时，value的{{1}}将会是不确定的。您可以在https://material-ui.com/api/text-field/

中找到selectedTestSuite.id API参考。

在获取选项后反应挂钩未设置选择值

2 个答案: