我应该如何解析这个json对象以响应生命周期方法? [英] How should I parse this json object in react with lifecycle method?

问题描述

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

How should I parse this using lifecycle methods?

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

我想在组件中呈现文本，但是我不知道为什么会引发未定义的错误.我该怎么称呼?

I want to render the text in my component but I don't know why it throws undefined error. How should I call it?

这是我的组件:

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，但首先在控制台中提供undefined.

This is my lifecycle method , I would use this.setState but first of all it's giving undefined in console.

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

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

This is the render part.. The data is coming from Firebase. And {this.blogcontent} gives that json string that I previously mentioned.

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

        </div>
    );
}
 }

 Blog.proptypes = {
    blogContent: Proptypes.string
 }

推荐答案

这主要取决于您从何处获取此对象.如果是通过网络获取的，则通过它的最佳位置是componentDidMount.这样做的原因是，替代性生命周期方法(componentWillMount)不能保证组件的重新渲染，因为它不等待异步操作完成执行，然后再将控制权传递给渲染方法.因此，componentDidMount最好，因为一旦接收到新的props或更改了state，它将触发重新渲染.但是，如果此对象是从应用程序中拉出的，则很有可能，即使在componentWillMount中拉出它也可以正常工作.这是因为该操作要快得多，以至于控制将通过新的props传递给render方法.尤其在要在进程中设置state的情况下，这不能保证(设置状态也是异步的，因此控件可以在接收所有必需的数据之前执行其余代码).

This would mostly depend on where you are getting this object from. If it is fetched over the network then the best place to pass it is in the componentDidMount. The reason for this is that the alternative lifecyle method (componentWillMount) does not guarantee a re-render of your component since it does not wait for async actions to finish execution before passing control down to your render method. Hence componentDidMount is best because as soon as new props are received or state is changed it will trigger a re-render. However, if this object is pulled from within the application then chances are, it will work just fine even if pulled within componentWillMount. This is because that operation would be much quicker, so much that control would be passed down to the render method with the new props. This is not guaranteed especially if you want to set state in the process (setting state is also async, so control might execute the rest of the code before all the required data is received).

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

In short, pass this to componentDidMount and in your render function, before accessing this prop, make sure that it exists. That is, instead of

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

宁可:

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

这就是您要执行的操作(假设您正在使用axios通过网络获取文件)

This is how you would do it (assuming you are getting the file over the network using axios)

componentDidMount() {
   axios.get('url/to/the/file')
     .then(fileData => this.setState({
       data: fileData
     });
}
render() {
  // return whatever you want here and setting the inner html to what the state holds
} 

这篇关于我应该如何解析这个json对象以响应生命周期方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！