必须单击两次以设置状态，然后调用功能

由 发布于

我试图将状态设置为数字，然后单击运行功能，但是现在我必须单击两次才能使其正常运行。我不确定为什么会发生这种情况以及该问题的可能解决方案。我有一个选择，当我选择一个数字时，我希望它为数据库中的该数量的项目触发提取。我的代码如下：

fetchNext函数：

  const fetchNext = async () => {
    const token = await localStorage.FBIdToken

    console.log("I'm running", formData.limit)
    const limit = formData.limit

    await axios
      .get(`/user?limit=${limit}`, {
        headers: {
          Authorization: `${token}`
        }
      })
      .then(res => {
        setUser(res.data)
      })
      .catch(err => console.log(err))
  }

这里是选择：

import React, { useRef } from 'react'

// MUI stuff
import Select from '@material-ui/core/Select'
import InputLabel from '@material-ui/core/InputLabel'
import MenuItem from '@material-ui/core/MenuItem'
import FormControl from '@material-ui/core/FormControl'

const SelectLimit = ({ limit, fetchNext, handleInputChange }) => {
  const inputLabel = useRef(null)

  return (
    <FormControl style={{ width: '100%' }}>
      <InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
        Type
      </InputLabel>
      <Select
        labelId="demo-simple-select-outlined-label"
        id="demo-simple-select-outlined"
        value={limit}
        onChange={handleInputChange('limit')}
        onClick={fetchNext}
        fullWidth
      >
        <MenuItem value="5">5</MenuItem>
        <MenuItem value="10">10</MenuItem>
        <MenuItem value="20">20</MenuItem>
      </Select>
    </FormControl>
  )
}

export default SelectLimit