为啥在这个例子中空字符串可以工作，而 this.state.foo 不行？ [复制]

Posted 2023-02-21

【中文标题】为啥在这个例子中空字符串可以工作，而 this.state.foo 不行？ [复制]

【英文标题】：Why does an empty string work in this example but this.state.foo doesn't? [duplicate]为什么在这个例子中空字符串可以工作，而 this.state.foo 不行？ [复制]

【发布时间】：2018-11-14 05:26:02

【问题描述】：

这是我的代码：

import React,  Component  from 'react'
import classnames from 'classnames'

class TodoTextInput extends Component 
  state = 
    text: this.props.text
  

  handleSubmit = e => 
    const text = e.target.value.trim()
    if (e.which === 13) 
      this.props.onSave(text)
      this.setState(
        text: ''
      )
    
  

  handleChange = e => 
    this.setState(
      text: e.target.value
    )
  

  handleBlur = e => 
    if (!this.props.newTodo) 
      this.props.onSave(e.target.value)
    
  

  render() 
    return (
      <input className=
             classnames(
               edit: this.props.editing,
               'new-todo': this.props.newTodo
               )
             
             type='text'
             autoFocus='true'
             value=this.state.text
             onChange=this.handleChange
             placeholder=this.props.placeholder
             onKeyDown=this.handleSubmit />
    )
  


export default TodoTextInput

当我运行此代码并开始在输入字段中输入时，我在控制台中收到以下错误消息：

警告：组件正在将文本类型的不受控制的输入更改为 被控制。

这使我相信 value 属性将 this.state.text 视为 null 或未定义。但是，当我添加 || 时代码有效' ' 在 state.text 的末尾变成：

text: this.props.text || ''

我有两个问题：

为什么即使 ' ' 应该转换为 falsy 也能正常工作 喜欢 this.props.text？

为什么 value 属性将 this.props.text 视为 null 或 undefined？

【参考方案1】：

this.state.text 的初始值未定义（意味着this.props.text 已未定义）。如果 input 的 value 属性未定义，React 会将输入视为“不受控制”。

你应该在状态初始化中回退到空字符串

state = 
  text: this.props.text || ''

解决此问题或将default value 分配给TodoTextInput

TodoTextInput.defaultProps = 
  text: ''