您的位置:首页 > Web前端 > React

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

2018-03-06 00:00 501 查看
摘要: Warning: `value` prop on `input` should not be null



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[/code] 
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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  React
相关文章推荐