Question

我有一个用户表单，它从prop中提取数据并使用其值填充每个输入字段。当我点击打开一个空表单时（好像我正在添加一个新用户），我收到错误TypeError: Cannot read property 'language' of undefined。

州：

   ...  
   constructor(props) {
    super(props);
    this.state = {
    language: this.props.user.language || '',
    description: this.props.user.description || ''
   }
   handleChange = (e) => {
    e.preventDefault();
    this.setState({[e.target.name]: e.target.value});
    console.log(this.state);
   }
   ...
  }

输入字段：

<input type="text" placeholder="Language..." id="language" name="language" value={this.state.language} onChange={this.handleChange}/>

如果无法读取用户对象的值，则应将值字段显示为空。我已经尝试将或值设置为null但这会引发相同的错误。

由于

Answer 1

您可以像这样检查this.props.user以避免错误：

this.state = {
    language: this.props.user ? this.props.user.language : '',
    description: this.props.user ? this.props.user.description : ''
}

这是使用等价于：

的三元运算符的内联运算

if (this.props.user) {
    return this.props.user.language;
} else {
    return '';
}

Answer 2

我之前使用componentWillReceiveProps()因为如果您更改$schedule->command('process:queue 0')->everyMinute()->withoutOverlapping(); $schedule->command('process:queue 1')->everyMinute()->withoutOverlapping();组件中的用户，它也会更改Parent中的状态，因为它会触发{{} 1}}。另外，检查构造函数是否存在Child。

componentWillReceiveProps()

Answer 3

这就是我想要的。

constructor(props) {
    super(props);
    this.state = {
        language: '',
        description: ''
    }
}

componentDidMount() {
    if (this.props.user) {
        this.setState({
            language: this.props.user.language,
            description: this.props.user.description
        })
    }
}

handleChange = (e) => {
    e.preventDefault();
    this.setState({[e.target.name]: e.target.value});
    console.log(this.state);
}

Answer 4

如果用户未定义，则可以使用lodash方法将字段设置为空 _.get(this.props, 'user.language','')

但看起来你没有将用户作为道具传递

ReactJS表单输入初始状态未定义

4 个答案: