我应该如何在react with lifecycle方法中解析这个json对象？

我应该如何使用生命周期方法解析它

{"blocks":[{
  "key":"33du7",
  "text":"Hello there!",
  "type":"unstyled",
  "depth":0,
  "inlineStyleRanges":[],
  "entityRanges":[],
  "data":{}}],
  "entityMap":{}
}

我想在我的组件中呈现文本，但我不知道它为什么会抛出未定义的错误。我该怎么称呼它

这是我的组件：

class Blog extends Component{

constructor(props){
    super(props);
    this.blogContent = props.blogContent;
    this.blogId = props.blogId;

    this.handleRemoveBlog = this.handleRemoveBlog.bind(this);
    this.state = {
        blog__: '',
    };

}

handleRemoveBlog(blogId){
    this.props.removeBlog(blogId);
}

这是我的生命周期方法，我会使用This.setState，但首先它在控制台中给出了未定义的

   componentWillMount(){
      this.state.blog__ = JSON.parse(this.blogContent);
      console.log(this.state.blog__.text);    // this gives undefined     
  } 

这是渲染部分。。 数据来自Firebase。 {this.blogcontent}给出了我前面提到的json字符串

render(props) {
    return(
        <div className = "blog header">
            <p>{this.blog__.text}</p>

        </div>
    );
}
 }

 Blog.proptypes = {
    blogContent: Proptypes.string
 }

---

这主要取决于您从何处获取此对象。如果它是通过网络获取的，那么传递它的最佳位置就是componentDidMount。原因是替代生命周期方法componentWillMount不保证重新呈现组件，因为它不会等待异步操作完成执行，然后再将控制权传递给呈现方法。因此componentDidMount是最好的，因为一旦收到新道具或状态发生变化，就会触发重新渲染。然而，如果这个对象是从应用程序中提取的，那么很有可能，即使在componentWillMount中提取，它也能正常工作。这是因为该操作会快得多，以至于可以使用新的道具将控制传递给渲染方法。这是不能保证的，特别是如果您想在进程中设置状态，那么设置状态也是异步的，所以控件可能会在收到所有必需的数据之前执行其余的代码

简而言之，将其传递给componentDidMount，并在渲染函数中，在访问此道具之前，确保它存在。也就是说，而不是

render() {
 return <div>{this.props.theObject.blocks[0].key}</div>
}

---

这主要取决于您从何处获取此对象。如果它是通过网络获取的，那么传递它的最佳位置就是componentDidMount。原因是替代生命周期方法componentWillMount不保证重新呈现组件，因为它不会等待异步操作完成执行，然后再将控制权传递给呈现方法。因此componentDidMount是最好的，因为一旦收到新道具或状态发生变化，就会触发重新渲染。然而，如果这个对象是从应用程序中提取的，那么很有可能，即使在componentWillMount中提取，它也能正常工作。这是因为该操作会快得多，以至于可以使用新的道具将控制传递给渲染方法。这是不能保证的，特别是如果您想在进程中设置状态，那么设置状态也是异步的，所以控件可能会在收到所有必需的数据之前执行其余的代码

简而言之，将其传递给componentDidMount，并在渲染函数中，在访问此道具之前，确保它存在。也就是说，而不是

render() {
 return <div>{this.props.theObject.blocks[0].key}</div>
}

在componentWillMount函数中使用此.setState{}，将数据分配给变量。另外，我建议使用componentDidMount而不是componentWillMount，因为它在将来会被弃用

  componentDidMount(){
      let text = JSON.parse( this.blogContent );
      this.setState({blog__: text });     
  } 

编辑：仅在componentDidMount中根据@brandNew comment使用setState。在componentWillMount函数中使用setState{}将数据分配给变量。另外，我建议使用componentDidMount而不是componentWillMount，因为它在将来会被弃用

  componentDidMount(){
      let text = JSON.parse( this.blogContent );
      this.setState({blog__: text });     
  } 

---

编辑：仅根据@brandNew comment在componentDidMount中使用setState，您不应使用

  this.state.blog__ = JSON.parse(this.blogContent);

正确的方法是使用this.setState方法：

然后，为了确保组件将被重新渲染，请使用shouldComponentUpdate方法：

请看下面的图片

另外一点：使用componentDidMount而不是componentWillMount，因为它将来会被弃用

  componentDidMount(){
      let text = JSON.parse( this.blogContent );
      this.setState({blog__: text });     
  } 

Atention:setState是一种异步方法。因此，它不会立即更新您的状态

---

不应使用修改状态

  this.state.blog__ = JSON.parse(this.blogContent);

正确的方法是使用this.setState方法：

然后，为了确保组件将被重新渲染，请使用shouldComponentUpdate方法：

请看下面的图片

另外一点：使用componentDidMount而不是componentWillMount，因为它将来会被弃用

  componentDidMount(){
      let text = JSON.parse( this.blogContent );
      this.setState({blog__: text });     
  } 

Atention:setState是一种异步方法。因此，它不会立即更新您的状态

---

请包含您为尝试使用此对象而编写的代码。@brandNew是正确的。简单回答-仅根据您的评论-使用componentWillMount，也可能使用componentWillUpdateSorry，我现在已经更新了它。现在，您能告诉我哪里出了问题吗？请包括您为尝试使用此对象而编写的代码。@brandNew是正确的。简单回答-仅根据您的评论-使用componentWillMount，也可能使用componentWillUpdateSorry，我现在已经更新了它。现在你能告诉我哪里出了问题吗？使用setState可能不是一个好主意，因为它不能保证状态会改变

---

在执行渲染方法之前设置。同样，这也适用于ComponentWillMount@brandNew这不应该是问题所在。渲染函数将被调用两次。这实际上是一个问题，因为您说海报必须在ComponentWillMount中设置状态。这肯定是一个问题，因为不能保证setState会在控制权移交给下一个函数之前完成，那么这就是问题所在。但是你应该经常使用component，看看你答案的第一行。在组件WillMountUsing中使用此.setState{}可能不是一个好主意，因为它不能保证在执行render方法之前设置状态。同样，这也适用于ComponentWillMount@brandNew这不应该是问题所在。渲染函数将被调用两次。这实际上是一个问题，因为您说海报必须在ComponentWillMount中设置状态。这肯定是一个问题，因为不能保证setState会在控制权移交给下一个函数之前完成，那么这就是问题所在。但是你应该经常使用component，看看你答案的第一行。在您的组件WillMount中使用此.setState{}。因此，如果我想获取该json字符串中的文本，我应该在componentDidMount中写些什么？此行的意思是什么-this.props.theObject&&this.props.theObject.blocks[0]。keyIt的惰性计算。Javascript和大多数其他编程语言都使用它。它所做的是计算第一个表达式，如果第一个表达式为false，则返回false，因为无论以下表达式是否为true，最终结果都为false，因为这两个表达式由一个与&&&符号连接。例如，false&&true返回false。false | | true返回true。谢谢，我明白了：如果我想获取json字符串中的文本，我应该在componentDidMount中写什么？这行的意思是什么-this.props.theObject&&this.props.theObject.blocks[0]。keyIt是惰性计算。Javascript和大多数其他编程语言都使用它。它所做的是计算第一个表达式，如果第一个表达式为false，则返回false，因为无论以下表达式是否为true，最终结果都为false，因为这两个表达式由一个与&&&符号连接。例如，false&&true返回false。false | | true返回true。谢谢，明白了：