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

无需使用JSON#stringify，您的title属性已经是一个字符串。
您的componentDidMount中的状态与我们所设置的不一样。尝试使用

componentDidMount() const data = {}; // Define data or get it like you want this.setState({ ...data }); }
在构造函数中初始化状态的位置。您不必做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 });
  }

反应-找不到数据

2 个答案: