Javascript react props未在构造函数中定义，存在于渲染中

我正在尝试创建一个受控文本区域

class TextArea extends React.Component {
  constructor(props) {
    super(props);
    this.state= {
        text: this.props.initial
    };
    this.handleChange = this.handleChange.bind(this);
  }

handleChange(event) {
    //some handle
}

render() {
    return (
        <textarea
          value={this.state.text}
          placeholder={this.props.initial}
          onChange={this.handleChange}
        />
    );
  }
}

---

我从$.getJSON调用中获取json，我认为textarea在json调用完成之前被呈现。有没有办法只在componentWillMount函数之后运行渲染函数？

需要了解的重要部分是，构造函数已经将道具作为参数，因此您可以直接在构造函数中访问道具作为

道具。只要您在构造函数中，就不需要通过
this.props
访问它

constructor(props) {
  super(props);
  this.state= {
    text: props.initial
  }
}

上面的代码应该可以工作


但是，这是构建组件（如
TextArea
）的更好方法，它还应该解决
props.initial
在运行时没有值的问题

首先，您需要在父组件中准备
handleChange
方法

class ParentComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      myTextArea: ''
    }

    this.handleChange = this.handleChange.bind(this)
  }

  handleChange (e) {
    this.setState({myTextArea: e.target.value})
  }

  render () {
    return (
      <TextArea
        value={myTextArea}
        onChange={this.handleChange}
      />
    )
  }
}

类ParentComponent扩展组件{
建造师（道具）{
超级（道具）
此.state={
myTextArea:“”
}
this.handleChange=this.handleChange.bind（this）
}
手变（e）{
this.setState（{myTextArea:e.target.value}）
}
渲染（）{
返回(
)
}
}

在文本区域组件上，在定义文本区域的onchange方法时，您引用了通过props传递的onchange方法

<textarea
  value={this.props.value}
  placeholder="Something"
  onChange={this.props.handleChange}
/>




这种方法的好处是，一个调用textarea的元素总是有一个更新的值，二是这个子元素不需要有状态。它使管理大型react应用程序变得更容易，并且在您开始尝试实施Redux或类似框架来为您处理状态时，它是正确的思维定势
从构造函数中删除
this
，因为您可以从其参数列表中访问
props


class TextArea扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
文本：props.initial，
}
this.handleChange=this.handleChange.bind（this）
}
手变（活动）{
this.setState（{text:event.target.value}）
}
render（）{
返回(
初始文本：{this.props.Initial}
)
}
}
ReactDOM.render(
,
document.getElementById（'root'））
)
您必须保证this.props.inital存在：

{ this.state.json && this.state.json.initial &&
  <TextArea initial={this.state.json.initial} text={this.state.json.text} changeHandler={this.handleChange}/>
}

{this.state.json&&this.state.json.initial&&
}
从
this.props
中删除
this
，它应该可以按预期工作。您不能在构造函数中使用
props.initial
吗？super正在正确构建this，因此不应更改anything@mersocarlin我试过了，但还是没有成功work@Wolfyaskingstuff请核对我的答案。我以你的代码为例，它正在工作：）@Wolfyaskingstuff你是否尝试在构造函数中植入一个
调试器
，然后检查那里是否有
道具。当构造函数运行时，initial
有值？可能以后会填充
props
，确实如此，但我不知道为什么在运行构造函数时它会有价值？如果没有，还有其他解决方法，比如让父组件提供将要使用的onchange方法。我可以修改我的答案，以表明如果您想尝试它，那么当构造函数为run@Wolfyaskingstuff我用一种更好的方法来更新我的答案来构造你的代码。我希望这能帮上忙如果我用字符串代替props.initial，效果会很好，但它仍然是一个未定义的，我不明白。你想做什么？您是否以
initial
prop的形式发送字符串？我正在发送字符串。我的意思是，如果我发送了一个硬编码字符串，它就工作了，如果我发送了初始属性（也是一个字符串），它就不会让你
console.log（this.state.json）
检查它是否定义了？我实际上在我的帖子中添加了一个编辑，解释了为什么它们没有定义。我现在只需要解决另一个问题
{ this.state.json && this.state.json.initial &&
  <TextArea initial={this.state.json.initial} text={this.state.json.text} changeHandler={this.handleChange}/>
}