自定义React Input组件传入value属性时无法渲染的问题排查

嘿，我一眼就揪出了导致组件崩溃的核心问题——你在处理组件state时犯了React的基础规则错误，直接导致传入value prop时组件无法正常渲染。

核心问题：State必须是对象类型 #

看你的extractStateFromProps方法：

extractStateFromProps (props) {
  const value = props.value;
  return value;
}

当你传入value prop（比如字符串"番茄炒蛋"）时，这个方法直接返回了这个原始字符串，然后你把它赋值给了this.state：

this.state = this.extractStateFromProps(props);

React要求组件的state必须是对象（或null），绝对不能是字符串、数字这类原始类型。当你把state设置为字符串时，React内部的状态管理逻辑会直接混乱，进而导致组件渲染失败。

而改用text prop时，props.value是undefined，extractStateFromProps返回undefined，React虽然不推荐这种写法，但暂时不会直接崩溃，所以组件能正常工作。

另外，componentWillReceiveProps里调用setState(this.extractStateFromProps(nextProps))时，同样是把字符串传给setState——但setState只接受对象或函数，这会进一步触发报错。

修复步骤 #

1. 修正State结构（基础修复） #

先让extractStateFromProps返回一个对象，确保state始终是合法的对象类型：

extractStateFromProps (props) {
  return { value: props.value };
}

这样构造函数和componentWillReceiveProps里的state赋值/更新就都是正确的对象格式了。

2. 移除不必要的内部State（推荐优化） #

仔细看你的render方法，你根本没用到this.state，直接用的是this.props.value！这说明这个组件已经是受控组件（完全由父组件通过props控制值和回调），内部state完全是多余的。可以直接删掉所有state相关代码，简化组件：

import React from 'react';
import PropTypes from 'prop-types';

class Input extends React.Component {
  onChange = e => this.props.onChange(e.target.value);

  render () {
    console.log(this.props);
    return (
      <input 
        type={this.props.type} 
        value={this.props.value} 
        onChange={this.onChange} 
        placeholder={this.props.placeholder} 
        name={this.props.identifier} 
      />
    );
  }
}

Input.propTypes = {
  type: PropTypes.oneOf(['text', 'number']), // 这里要传数组，oneOf才会生效
  value: PropTypes.string,
  onChange: PropTypes.func.isRequired, // 受控组件建议把onChange设为必填
  placeholder: PropTypes.string,
  identifier: PropTypes.string
};

export default Input;

这样组件逻辑更清晰，也彻底避免了state相关的错误。

3. 替换废弃的生命周期方法 #

componentWillReceiveProps已经被React废弃，如果你之后确实需要在props变化时做处理，建议改用componentDidUpdate或者getDerivedStateFromProps——不过在这个受控组件里，完全不需要这类逻辑。

修复后的使用示例 #

现在你可以正常使用value prop了：

<Input 
  type="text" 
  placeholder="Recipe Name" 
  onChange={this.onRecipeNameChange} 
  identifier="recipeName" 
  value={this.state.currentRecipe.recipeName} 
/>

内容的提问来源于stack exchange，提问作者Dhanushu Uzumaki