使用钩子函数useEffect实现动态下拉选项

Posted John.liu_Test

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用钩子函数useEffect实现动态下拉选项相关的知识,希望对你有一定的参考价值。

如果valueEnum的值是通过接口获取的,比如说,你想用数据库里的用户id作为key,userName作为text:值,因为数据是会动态变化的,无法用枚举直接自定义,下面给出一种解决方法:
const [datas, setDatas] = useState()
  useEffect(() =>
  //调用接口
   listOverdue().then((res) =>
   //如果响应成功
    if(res.bizCode===200)
     let data = ;
     //将拿到的返回值遍历
     res.data.map(item=>
  //使用接口返回值的id做为 代替原本的0,1
      data[item.id]=
  //使用接口返回值中的overdueValue属性作为原本的text:后面的值
       text: item.overdueValue,
     
     )
     setDatas(data) 
        
  )
 , []);
 ----------------然后使用-----------------------------
 
   title: '是否过期',
   dataIndex: 'overdue',
   key: 'overdue',
   valueEnum: datas
   

如何使用/不使用 useEffect 钩子在 React JS 函数中获取更改的(新)状态值?

【中文标题】如何使用/不使用 useEffect 钩子在 React JS 函数中获取更改的(新)状态值?【英文标题】:How to get the changed (new) state value in React JS function with / without useEffect hook? 【发布时间】:2021-10-09 12:36:33 【问题描述】:

我只想在特定范围内动态更新源和目标的字体大小(这里的范围应该在 12 - 18 之间)。它正在工作,但更新/更改的值不会反映下一次函数调用。我知道我们可以使用 useEffect 挂钩来使其反映某些情况,但在这种情况下,我不确定 useEffect 挂钩是否有用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>React JS</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.development.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.development.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-datetime/3.0.0/react-datetime.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/react-datetime/3.0.0/css/react-datetime.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/css/uikit.min.css" rel="stylesheet" type="text/css">
</head>
<body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <script type="text/babel">
        const  useState  = React
        const Editor = (props) => 
            const [sourceLanguageFontSize, setSourceLanguageFontSize] = useState(15)
                const [targetLanguageFontSize, setTargetLanguageFontSize] = useState(15)
            const [allowedMinFontSize, allowedMaxFontSize] = [12, 18]
            const changeFontSize = (stateVal, setFunction, action = '+') => 
                console.log(parseInt(stateVal)) //Here it prints old value
                if (parseInt(stateVal) >= allowedMinFontSize && parseInt(stateVal) <= allowedMaxFontSize) 
                    let currentFontSize = parseInt(stateVal)
                    if (action == '+')
                        setFunction(prevState => prevState + 1)
                    else if (action == '-')
                        setFunction(prevState => prevState - 1)
                   
            
            return(
                <span onClick=e => changeFontSize(sourceLanguageFontSize, setSourceLanguageFontSize, '+') >Increase Source</span>
            )
        
        ReactDOM.render(<Editor />,document.getElementById("root"))
    </script>
</body>
</html>

【问题讨论】:

显然它会注销 current(或 old)状态值,因为这是您在 点击时传入的值我>:changeFontSize(sourceLanguageFontSize, ...)。鉴于此,对于如此简单的任务,您的代码过于复杂?您是否考虑过简单地定义两个回调来增加和减少值?例如:const decrease = () =&gt; setSourceLanguageFontSize(current =&gt; current &gt; allowedMinFontSize ? current - 1 : current); 我只是让它变得简单。实际上它具有也将被更新的目标值。所以我在那个函数中使用了三个参数 我没关注,抱歉?! 好的,感谢您的宝贵时间 【参考方案1】:

应该像这样工作

function editor (props) 
        const [count, setCount] = useState(15)
        const [sourceLanguageFontSize, setSourceLanguageFontSize] = useState(15)
            const [targetLanguageFontSize, setTargetLanguageFontSize] = useState(15)
        const [allowedMinFontSize, allowedMaxFontSize] = [12, 18]
        
        const changeFontSize = (action = '+') => 
            console.log(parseInt(sourceLanguageFontSize)) //Here it prints old value
            if (parseInt(sourceLanguageFontSize) >= allowedMinFontSize && parseInt(sourceLanguageFontSize) <= allowedMaxFontSize) 
                let currentFontSize = parseInt(sourceLanguageFontSize)
                if (action == '+')
                    setSourceLanguageFontSize(prevState => prevState + 1)
                else if (action == '-')
                    setSourceLanguageFontSize(prevState => prevState - 1)
               
        
        return(
            
            <span onClick=e => changeFontSize('+') >Increase Source</span>
        )
    

【讨论】:

能否根据更新后的问题代码更改答案代码? 实际上我也需要更新目标字体大小,这就是我传递三个参数的原因。保持原样并更新答案 那我不明白你想达到什么目的。你也想更新targetLanguageFontSize

以上是关于使用钩子函数useEffect实现动态下拉选项的主要内容,如果未能解决你的问题,请参考以下文章

使用 React Hook 动态设置 GraphQL 变量不起作用

如何在 React 函数组件中不使用 useEffect 钩子获取数据?

无效的挂钩调用。钩子只能在反应函数组件内部使用...... useEffect,redux

我应该在哪里声明在 useEffect() 钩子中调用的函数?

用于反应钩子的 useEffect 的替代品

为啥 useEffect 钩子在第一次渲染时不调用函数?