React - 未找到数据

Question

我有一个主要组件Resume和一个名为Header的孩子：

class Resume extends Component {
      constructor(props) {
        super();
        this.state = {
          data: {}
        }
      }
      componentDidMount() {
        this.setState( this.state = data);
      }
      render() {
        return (
          <div className="Resume">
            <Header data={this.state.header} />
            <Skills data={this.state.skills} />
          </div>
        );
      }
    }
    export default Resume;

    class Header extends Component {
      render() {
        return (
          <div className="header">
            <h1>{JSON.stringify(this.props.data.title)}</h1>
          </div>
        );
      }
    }

My simple sample data so far is: 

{
  "header": {
    "title": "Tim Smith's Resume"
  },
  "skills": [
    {"name": "HTML", "duration": 14}
  ]
}

我为什么得到：TypeError: Cannot read property 'title' of undefined

Answer 1

1. 无需使用JSON#stringify您的标题属性已经是一个字符串。
2. 在你的componentDidMount不是我们正在设置状态。尝试使用

   componentDidMount() 
       const data = {}; // Define data or get it like you want
       this.setState({
           ...data
       });
   }

3. 在构造函数中初始化状态。你必须做this.state = { header: {}, skills: {} }不是你做的。

Answer 2

看起来你没有正确设置<Resume/>组件的状态。请尝试以下调整：

 componentDidMount() {
    // This will set the `data` field of your component state, to the 
    // value of the `data` variable.

    this.setState({ data : data });
  }