Warning: Use the `defaultValue` or `value` props on

最新推荐文章于 2022-10-08 11:07:22 发布

pardon110

最新推荐文章于 2022-10-08 11:07:22 发布

阅读量1.7k

点赞数

分类专栏： bugLog react 文章标签： react 函数组件

本文链接：https://blog.csdn.net/u011584949/article/details/98634950

版权

bugLog 同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

react

3 篇文章 0 订阅

订阅专栏

需求

写了一个Select的函数组件，代码如下

        function Select({values, callback, disabled=false, readOnly=false,selected}){
            return (
                <select
                    disabled={disabled}
                    readOnly={readOnly}
                    onChange={({target:{value}}) => callback(value)}
                >
                    {values.map(([value,text],index) => (
                        <option selected={selected === value} value={value} key={index}>
                                {text}
                        </option>
                    ))}
                </select>
            )
        }

报错

react-dom.development.js:500 Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.
    in option (created by Select)
    in select (created by Select)
    in Select

分析

警告信息，已经告知很明显，使用在原生的select节点上标示 value 或 defaultValue，就可以指定 options项指定传入进来的默认值，来替代之前常用的在 option上判断 selected 的做法
换而言之，在React语境下，不需要将在option上判断val，在select上指定 defaultValue即可

bug fix

      function Select({values, callback, disabled=false, readOnly=false,selected}){
            return (
                <select
                    disabled={disabled}
                    readOnly={readOnly}
                    onChange={({target:{value}}) => callback(value)}
                    defaultValue={selected}
                >
                    {values.map(([value,text],index) => (
                        <option  value={value} key={index}>
                                {text}
                        </option>
                    ))}
                </select>
            )
        }