Warning: Input is changing an uncontrolled input of type text to be controlled...

最新推荐文章于 2022-05-30 19:28:43 发布

weixin_34381666

最新推荐文章于 2022-05-30 19:28:43 发布

阅读量321

点赞数

文章标签： javascript python 前端 ViewUI

原文链接：https://my.oschina.net/johnsken/blog/1630605

版权

2019独角兽企业重金招聘Python工程师标准>>>

react input Warning

Warning: Input is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

warning.js?6327:33 Warning: `value` prop on `input` should not be null. Consider using the empty string to clear the component or `undefined` for uncontrolled components.
    in input (created by Input)
    in Input (created by AdvertisementEdit)
    in div (created by FormGroup)
    in FormGroup (created by AdvertisementEdit)
    in div (created by Col)
    in Col (created by AdvertisementEdit)
    in div (created by Row)
    in Row (created by AdvertisementEdit)
    in div (created by CardBlock)
    in CardBlock (created by AdvertisementEdit)
    in div (created by Card)
    in Card (created by AdvertisementEdit)
    in AdvertisementEdit (created by Connect(AdvertisementEdit))
    in Connect(AdvertisementEdit) (created by Route)
    in Route (created by Full)
    in Switch (created by Full)
    in div (created by Container)
    in Container (created by Full)
    in main (created by Full)
    in div (created by Full)
    in div (created by Full)
    in Full (created by Route)
    in Route
    in Switch
    in Router (created by ConnectedRouter)
    in ConnectedRouter
    in Provider

React开发中，每当出现类似这种的警告，对于强迫症来说真的很奔溃。

代碼如下

 <Select
                mode="multiple"
                size="large"
                style={{ width: '100%' }}
                placeholder="Please select"
                defaultValue={this.state.show}
                onChange={this.handleChangeOption}
            >
                {children}
            </Select>

原因解析： Select 组件需要给它设置默认值，而这个值是由接口给它的，如果是前端自己定义值的话是没有什么问题的，由于react通过接口返回数据是有一定的周期。第一次进入渲染该组件时，就已经让defaultValue生效了，之后再重新渲染的话不会改变其默认值。

defaultValue就是默认值，第一次设置时生效；value就是当前Select的值，设置value={this.state.value}就等于Select的当前值就是this.state.value。

参考资料： react 表单组件用 defaultValue 还是 value

解决办法：将 defaultValue 改为 value。

<Select
                mode="multiple"
                size="large"
                style={{ width: '100%' }}
                placeholder="Please select"
                value={this.state.show}
                onChange={this.handleChangeOption}
            >
                {children}
            </Select>

转载于:https://my.oschina.net/johnsken/blog/1630605