Question

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

{"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但首先它会在控制台中给出undefined。

   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
 }

Answer 1

这主要取决于你从哪里获得这个对象。如果它是通过网络获取的，那么传递它的最佳位置是componentDidMount。这样做的原因是替代生命周期方法（componentWillMount）不保证重新呈现组件，因为它不会等待异步操作完成执行，然后再将控制权传递给render方法。因此componentDidMount是最好的，因为只要收到新props或更改state，它就会触发重新渲染。但是，如果从应用程序中提取此对象，那么即使在componentWillMount范围内拉动，它也可以正常工作。这是因为该操作会更快，因此控制将通过新的props传递给render方法。如果您想在进程中设置state（设置状态也是异步，因此控件可能会在收到所有需要的数据之前执行其余代码），这是无法保证的。

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

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

而是：

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

这就是你要做的（假设你是通过网络使用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
}

Answer 2

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

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

编辑：仅根据@brandNew评论

在componentDidMount中使用setState

Answer 3

您不应使用

修改状态

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

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

  this.setState({blog__: JSON.parse(this.blogContent)})

然后，为了确保重新呈现组件，请使用方法shouldComponentUpdate()：

shouldComponentUpdate(nextProps,nextState) {
    if(nextState != this.state) {
        this.forceUpdate()
    }
}

查看State and Lifecycle docs。

其他要点：使用componentDidMount()代替componentWillMount()，因为将来会弃用它。

注意：setState()是一种异步方法。因此，它不会立即更新您的州。

我应该如何解析这个json对象与生命周期方法的反应？

3 个答案: