在函数组件中引入FundValueCard类组件触发state读取未定义错误如何解决

数据老陈

2026-10-3

报错根因

你遇到的报错本质是FundValueCard组件读取this.props.location.state时，location属性为undefined，并非类组件自身的state未初始化：

错误信息里的reading 'state'实际指向的是this.props.location下的state字段，不是类组件本身的this.state
该问题通常是因为FundValueCard之前直接注册为路由子组件时，react-router会自动注入location属性，现在把它放在普通组件Accordion内部渲染，没有对应的路由属性自动注入，才会导致属性丢失。

修复方案

方案1：手动传递location属性
在Accordion函数组件内通过react-router提供的useLocation钩子拿到路由参数，传递给FundValueCard即可：

import { useLocation } from 'react-router-dom'

function Accordion() {
  const location = useLocation()
  // 原有业务逻辑
  return (<Accordion> <FundValueCard location={location} /> </Accordion>)
}

方案2：属性访问加兜底逻辑，同时替换废弃生命周期
官方已经废弃componentWillMount生命周期，建议替换为componentDidMount，同时给属性访问加可选链兜底，避免属性不存在时直接崩溃：

class FundValueCard extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: {},
      translate: 0,
      disableRightArrow: false
    }
  }

  componentDidMount() {
    const service = new MyRequestsService();
    // 可选链兜底，属性不存在时不会直接报错
    const policyNumber = this.props.location?.state?.mySelectedPolicy?.policyNumber
    if (!policyNumber) return
    service.getListFundDetail(policyNumber)
      .then(res => res)
      .then((result) => {
        this.setState({
          data: result.data.data,
        });
      })
  }
}