如何使用选择下拉列表在更改时使用 axios POST 选择表单值？

Question

我有一个来自 MaterialUI 的选择表单，其中填充了我通过 axios GET 请求收到的选择。这可行，但是，我现在需要 axios POST 在我的 handleChange(event) 函数中请求选定的选项。我需要从选择下拉列表中POST 的数据应该是MenuItem 的string 值，而不是索引或键。

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 250,
  },
  selectEmpty: {
    marginTop: theme.spacing(1),
  },
}));

function SimpleSelect() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    firm: '',
    infosys: '',
    spot: '',
  });
  const [choices, setChoices] = React.useState([])

  const inputLabel = React.useRef(null);
  const [labelWidth, setLabelWidth] = React.useState(100)

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios.get(
        'http://127.0.0.1:5000/form/',
      );
      console.log('RESULT DATA: ', result.data)
      setChoices(result.data)
    };
    fetchData();
  }, []);

useEffect(() => {
  console.log(values);
}, [values]);

以下是可能存在问题的区域：

  function handleChange(event) {
    setValues({
      firm: event.target.value
    })
  }

  const selectOptions = choices.map((choice, index) =>
    <MenuItem key={index} value={choice} primarytext={choice}>{choice} 
    </MenuItem>
  ) 

  return (
    <form className={classes.root} autoComplete="off">

      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="firm-helper">Firm</InputLabel>
        <Select
          value={values.firm}
          onChange={handleChange}
          input={<Input name="firm" id="firm-helper" />}
        >
          {selectOptions}  
        </Select>
        <FormHelperText>Select a Firm</FormHelperText>
      </FormControl>
    <form>
  )

只要下拉菜单中的选定选项发生变化，我希望能够在我的 handleChange 函数中提出 axios POST 请求。我希望POST firm 值在我的values 字典中

电流输出：

Access to XMLHttpRequest at 'http://127.0.0.1:5000/form/' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
xhr.js:166 POST http://127.0.0.1:5000/form/ net::ERR_FAILED

Answer 1

在您使用console.log 时，values 仍将是旧（当前）值。您需要使用useEffect 来执行基于values 变化的某种效果。如果您删除当前的控制台日志并添加它，您应该会看到更好的结果。注意：将带有values 的数组作为第二个参数传递是告诉values 更改时发生此效果的原因。

useEffect(() => {
  console.log(values);
  const fetchData = async () => {
    const result = await axios.post(url, { values: values });
  };
  fetchData(); 
}, [values]);