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

问题描述

1. 我正在使用组件安装上的api调用来获取测试套件列表。 Api按时间顺序返回列表。
2. 将它们设置为选择下拉菜单（Material-UI）的选项。
3. 然后将所选选项设置为最新的testSuite，并使用其ID获取相应的testSuite数据。
4. 成功检索数据并显示饼图。
5. 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参考。