React新手求助：getDefaultProps与getInitialState未正常工作

嘿，我来帮你搞定这两个问题！咱们一步步拆解：

1. getDefaultProps未返回默认name的原因 #

你代码里的getDefaultProps有个明显的语法错误：return的对象里，name: "React"后面用了分号;，这不符合JavaScript对象字面量的语法规范，会导致函数无法正确返回默认props对象，自然就拿不到默认的name值了。

另外要注意：在React.createClass的getDefaultProps里，this.props还没被赋值到组件实例上，所以你写的console.log(this.props)大概率会打印undefined，这是正常现象，不影响默认props的生效。

修正后的getDefaultProps应该是这样：

getDefaultProps: function() {
  return {
    name: "React"
  };
}

2. 添加getInitialState后表单无法显示的问题 #

这种情况几乎都是getInitialState的写法有语法错误（比如你代码里只写了getInitialState: function...没完成定义）。在React.createClass中，getInitialState必须是一个返回纯JavaScript对象的函数，任何语法错误都会导致组件渲染失败，表单自然就看不到了。

举个正确的例子，如果你的表单需要管理输入框的状态，getInitialState应该这么写：

getInitialState: function() {
  return {
    inputValue: ""
  };
}

完整的修正后代码 #

把两部分结合起来，完整的Greeter组件应该是这样的：

var Greeter = React.createClass({
  // 正确的默认props定义
  getDefaultProps: function() {
    return {
      name: "React"
    };
  },
  // 正确的初始状态定义
  getInitialState: function() {
    return {
      inputValue: ""
    };
  },
  // 表单输入的处理函数（示例）
  handleInputChange: function(e) {
    this.setState({ inputValue: e.target.value });
  },
  render: function() {
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
        <form>
          <input
            type="text"
            value={this.state.inputValue}
            onChange={this.handleInputChange}
            placeholder="输入点东西试试"
          />
        </form>
      </div>
    );
  }
});

// 渲染组件，不传name属性测试默认值
ReactDOM.render(<Greeter />, document.getElementById('root'));

额外小提示 #

如果你用的是较新版本的React，更推荐使用ES6类组件（或者函数组件+Hooks）的写法，React.createClass已经是比较旧的API了，不过现在先把当前写法的问题解决就好～

内容的提问来源于stack exchange，提问作者Akshvir Soni