反应 - 未找到数据答案

【问题标题】：React - Data not found反应 - 未找到数据
【发布时间】：2023-04-02 16:15:01
【问题描述】：

我有一个主要组件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

【问题讨论】：

{JSON.stringify(this.props.data)} 渲染 {"title":"Tim Smith's Resume"}
componentDidMount() 中的data 来自哪里？它是否在您未显示的文件中的某处定义？

标签： reactjs api object fetch

【解决方案1】：

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

componentDidMount() const data = {}; // Define data or get it like you want this.setState({ ...data }); }
在初始化状态的构造函数中。你必须做this.state = { header: {}, skills: {} } 而不是你所做的。

【讨论】：

【解决方案2】：

您似乎没有正确设置<Resume/> 组件的状态。尝试以下调整：

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

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

【讨论】：