React应用状态传递异常：空字符串变undefined致搜索失效

DevOps 小满

2026-8-21

问题分析与解决方案

核心问题

在DividendResultsDisplay组件中，你错误地使用props.data访问数据，但父组件SearchPage传递的props名称是dividendsData，而非data。这直接导致props.data为undefined，引发后续渲染错误。

具体错误点

在DividendResultsDisplay.js的返回部分：

return (
  <div>
    <h3>{props.data.name}</h3>
    <h4>{props.data.sector}</h4>
    {/* ...其他代码 */}
  </div>
)

此处的props.data应为props.dividendsData，同时初始状态的dividendsData缺少summary和sector字段，也会引发潜在渲染问题。

修复步骤

修正props名称错误
修改DividendResultsDisplay.js中的返回代码：

return (
  <div>
    <h3>{props.dividendsData.name}</h3>
    <h4>{props.dividendsData.sector}</h4>
    {renderDescription()}
    <br/><br/>
    {mainInfo}
    <br/>
    {yieldChange}
    <br/>
    {allDividends}
  </div>
)

补充初始状态缺失字段
在SearchPage.js的dividendsData初始状态中添加缺失字段：

const [dividendsData, setDividendsData] = useState(
  {
    current_price: '',
    recent_dividend_rate: '',
    current_yield: '',
    dividend_change_1_year: '',
    dividend_change_3_year: '',
    dividend_change_5_year: '',
    dividend_change_10_year: '',
    all_dividends: [],
    name: '',
    description: '',
    summary: '',
    sector: '',
    earnings: []
  }
)

增加字段容错处理
修改renderDescription函数，避免因summary字段为空报错：

const renderDescription = () => {
  if (descriptionVisible) {
    return (
      <p style={{cursor: 'pointer'}} onClick={toggleDescription}>{props.dividendsData.summary || '暂无描述'}</p>
    )
  } else {
    return (
      <a style={{cursor: 'pointer'}} onClick={toggleDescription}>Description <div className="ui icon caret up"></div></a>
    )
  }
}