时间戳

首页 > 解决方案 > 必须单击两次才能设置状态，然后调用函数

reactjs - 必须单击两次才能设置状态，然后调用函数

问题描述

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

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

标签： reactjs

解决方案

你需要改变你的 onChange

onChange = {(e) => handleInputChange(e.target.value)}

我希望它能解决你的问题。

推荐阅读