React访问props.players[0]报TypeError未定义错误求助

报错基本信息 #

• 报错触发场景：React项目渲染Match组件时抛出
• 报错定位：Match组件内{props.players[0]} <span>vs</span> {props.players[1]}行
• 预期数据结构：认为matchData[0]存储的单条对战数据如下

{
  players: ["Disguised Lizard", "DrSpiteful"],
  winner: "DrSpiteful",
  scoreDifference: 1
}

涉及的组件代码如下：

• MatchList组件

import React from 'react';
import Match from './Match';
import matchData from '../data/matchData';

function MatchList(props) {
  const oneMatch = matchData[0];
  console.log(oneMatch);
  return (
    <section className="PlayerList MatchList">
      <h1>Match list</h1>
      <Match
        players={oneMatch.players}
        winner={oneMatch.winner}
        scoreDifference={oneMatch.scoreDifference}
        />
    </section>
  );
}

export default MatchList;

• Match组件

import React from 'react';

function Match(props) {
  return (
    <article className="Match">
      <h1>
        {props.players[0]} <span>vs</span> {props.players[1]}
      </h1>
      {/* To be shown when there is a winner */}
      <h2>
        {props.winner} is the winner by {props.scoreDifference}!
      </h2>
      {/* To be shown when there is no winner */}
      <h2>No winners yet!</h2>
    </article>
  );
}

export default Match;

错误根因 #

报错的直接原因是渲染Match组件时，传入的players属性值为undefined，对undefined值取索引[0]就会触发这个类型错误。结合贴出的代码，90%的概率是matchData的导入/导出结构和预期不符：
主观认为matchData是包裹对战数据的数组，索引0是第一条对战对象，但实际../data/matchData文件里默认导出的是单个对战对象，没有外层数组包裹。
这种情况下：

1. matchData本身就是单个对战对象，不是数组
2. 执行const oneMatch = matchData[0]时，对象没有数字键0，oneMatch赋值为undefined
3. 给Match组件传参时写players={oneMatch.players}，本质是读取undefined的players属性，得到的值也是undefined
4. Match组件里直接读props.players[0]就会抛出看到的错误

可以在MatchList里加一句console.log(Array.isArray(matchData))验证，如果打印false就说明确实是这个问题。

剩下10%的概率是项目里其他位置直接写了<Match />渲染组件，没有传入任何props，也会触发同样的报错。
另外贴出的Match组件还有逻辑问题：两个<h2>标签会同时渲染，不管有没有winner都会同时显示获胜信息和“暂无胜者”提示。

修复步骤 #

1. 修正matchData文件的导出结构，确保导出的是数组格式：

// ../data/matchData.js 正确写法
const matchData = [
  {
    players: ["Disguised Lizard", "DrSpiteful"],
    winner: "DrSpiteful",
    scoreDifference: 1
  }
]
export default matchData;

2. 给Match组件增加参数兜底和条件渲染，从根源上避免空值报错，同时修复胜负文案的显示逻辑：

import React from 'react';

function Match(props) {
  // 解构赋值加默认兜底，哪怕props没传也不会报错
  const { players = [], winner = '', scoreDifference = 0 } = props;
  return (
    <article className="Match">
      <h1>
        {players[0] || '待定选手'} <span>vs</span> {players[1] || '待定选手'}
      </h1>
      {/* 按winner是否存在条件渲染对应文案 */}
      {winner ? (
        <h2>
          {winner} is the winner by {scoreDifference}!
        </h2>
      ) : (
        <h2>No winners yet!</h2>
      )}
    </article>
  );
}

export default Match;

3. 全局搜索项目中所有<Match的调用位置，确保每一处调用都传入了符合格式的players、winner、scoreDifference属性，不要出现无参直接渲染的情况。

内容的提问来源于stack exchange，提问作者jhoangqm