Reactjs 反应-无法读取属性'；标题'；未定义的

我遇到以下错误：在尝试加载我的页面时，无法读取undefined的属性“title”

这是我的密码：

import resumeDataFr from './data/resumeDataFr'

class App extends Component {
  state = {
    resumeDataFr: {}
  }

  componentDidMount () {
    this.handleLoadResumeData()
  }

  handleLoadResumeData () {
    this.setState({ resumeDataFr: resumeDataFr })
  }

  render () {
    return (
      <div>
        <Header data={this.state.resumeDataFr.header} />
        <Treatment data={this.state.resumeDataFr.treatment} />
      </div>
    )
  }
}

App.propTypes = {
  data: PropTypes.object.isRequired
}

export default App

当只有标题组件被调用时，它就工作了，但当我添加处理组件时，它就不再工作了。我从应用程序中检查状态，看起来满足了：

这就是我的依赖性：

"dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  }

我不知道我做错了什么，非常感谢您的帮助。

当您执行

（{data}）

时，您正在解构该函数的输入参数（即，从该对象获取数据属性。我想您可能需要这样做：

const Treatment = (data) => {

并保持所有其他内容不变（例如引用data.title），或者可能是这样，以使用解构来获得要使用的属性，如title：

const Treatment = ({ title }) => {
  return (
    <div id='treatments' className='text-center'>
      <div className='container'>
        <div className='col-md-10 col-md-offset-1 section-title'>
          <h2>{title}</h2>
        </div>
      </div>
    </div>
  )
}

const-Treatment=（{title}）=>{
返回(
{title}
)
}

您正在访问resumeDataFr.treatment

<Treatment data={this.state.resumeDataFr.treatment} />

当你说data.title时 您调用未定义对象的标题

你可以像下面这样解决

<h2>{data?.title}</h2>

class App extends Component {
  state = {
    resumeDataFr: null
  }

  componentDidMount () {
    this.handleLoadResumeData()
  }

  handleLoadResumeData () {
    this.setState({ resumeDataFr: resumeDataFr })
  }

  render () {
    if(this.state.resumeDataFr)
       return null; // or show some loading
    return (
      <div>
        <Header data={this.state.resumeDataFr.header} />
        <Treatment data={this.state.resumeDataFr.treatment} />
      </div>
    )
  }
}

{data？.title}

或者你可以做下面的事情

<h2>{data?.title}</h2>

class App extends Component {
  state = {
    resumeDataFr: null
  }

  componentDidMount () {
    this.handleLoadResumeData()
  }

  handleLoadResumeData () {
    this.setState({ resumeDataFr: resumeDataFr })
  }

  render () {
    if(this.state.resumeDataFr)
       return null; // or show some loading
    return (
      <div>
        <Header data={this.state.resumeDataFr.header} />
        <Treatment data={this.state.resumeDataFr.treatment} />
      </div>
    )
  }
}

类应用程序扩展组件{
状态={
resumeDataFr:null
}
组件安装（）{
this.handleLoadResumeData（）
}
handleLoadResumeData（）{
this.setState（{resumeDataFr:resumeDataFr}）
}
渲染（）{
if（this.state.resumeDataFr）
返回null；//或显示一些加载
返回(
)
}
}

在加载数据之前，您可能还需要有一个默认状态或捕获空状态，但我认为我上面所说的是您的问题之一。因此，实际上这不是一个真正的“问题”，这是正确的react行为？我仍在学习它，因此感谢您的帮助，它解决了我的问题。这是行为，基本上它将渲染一次，componentdidmount将触发，因此您的默认状态值将被渲染，因此您应该处理它，这就是想法

class App extends Component {
  state = {
    resumeDataFr: null
  }

  componentDidMount () {
    this.handleLoadResumeData()
  }

  handleLoadResumeData () {
    this.setState({ resumeDataFr: resumeDataFr })
  }

  render () {
    if(this.state.resumeDataFr)
       return null; // or show some loading
    return (
      <div>
        <Header data={this.state.resumeDataFr.header} />
        <Treatment data={this.state.resumeDataFr.treatment} />
      </div>
    )
  }
}