ReactJS渲染后端嵌套数据：展示betTypes全部名称列表

问题说明 #

需要将JSON数据中betTypes数组内所有对象的name渲染为列表，但当前代码只能查询嵌套数组中的单个对象（且原代码中game.betTypes[3]会因数组长度不足导致报错）。

示例JSON数据 #

const data = {
  games: [
    {
      name: 'BlackJack',
      slug: 'American Blackjack',
      category: 'Card games',
      image: '/images/bj.jpg',
      betTypes: [
        {
          name: 'Flush',
          det: 'Flush',
          category: 'American Blackjack',
          description:
            'The player’s two initial cards and dealer’s first cards are all of the same suits and have different values (it is also valid if two of the three cards are of the same value)',
          image: '',
        },
        {
          name: 'Mixed Color Pair',
          det: 'MXP',
          category: 'American Blackjack',
          description:
            'When the player gets two initial cards as a pair (same value) of different colour and different suit.',
          image: '',
        },
      ],
    }, 
  ]
};

原前端代码 #

function GameScreen() {
  const params = useParams();
  const { slug } = params;

  const [{ loading, error, game }, dispatch] = useReducer(reducer, {
    game: [],
    loading: true,
    error: '',
  });

  useEffect(() => {
    const fetchData = async () => {
      dispatch({ type: 'FETCH_REQUEST' });
      try {
        const result = await axios.get(`/api/games/slug/${slug}`);
        dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
      } catch (err) {
        dispatch({ type: 'FETCH_FAIL', payload: err.message });
      }
    };
    fetchData();
  }, [slug]);

  return loading ? (
    <div>
      <LoadingSpin />
    </div>
  ) : error ? (
    <div>{error}</div>
  ) : (
    <div>
      <Row>
        <Col md={12}>
          <h1>{game.name}</h1> <hr />
          <img className="img-large" src={game.image} alt={game.name} />
        </Col>
        <Col md={3}>
          <ListGroup>
            <ListGroup.Item style={{ marginTop: '10px' }}>
              <h6>{game.betTypes[3].name}</h6>
            </ListGroup.Item>
          </ListGroup>
        </Col>
        <Col md={3}></Col>
      </Row>
    </div>
  );
}

解决方案 #

通过数组map()方法遍历betTypes数组，批量生成列表项，并增加空值判断避免报错：

修改后的代码 #

function GameScreen() {
  const params = useParams();
  const { slug } = params;

  const [{ loading, error, game }, dispatch] = useReducer(reducer, {
    game: [],
    loading: true,
    error: '',
  });

  useEffect(() => {
    const fetchData = async () => {
      dispatch({ type: 'FETCH_REQUEST' });
      try {
        const result = await axios.get(`/api/games/slug/${slug}`);
        dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
      } catch (err) {
        dispatch({ type: 'FETCH_FAIL', payload: err.message });
      }
    };
    fetchData();
  }, [slug]);

  return loading ? (
    <div>
      <LoadingSpin />
    </div>
  ) : error ? (
    <div>{error}</div>
  ) : (
    <div>
      <Row>
        <Col md={12}>
          <h1>{game.name}</h1> <hr />
          <img className="img-large" src={game.image} alt={game.name} />
        </Col>
        <Col md={3}>
          <ListGroup>
            {/* 遍历betTypes数组生成所有列表项 */}
            {game.betTypes?.map((betType, index) => (
              <ListGroup.Item key={index} style={{ marginTop: '10px' }}>
                <h6>{betType.name}</h6>
              </ListGroup.Item>
            ))}
          </ListGroup>
        </Col>
        <Col md={3}></Col>
      </Row>
    </div>
  );
}

关键修改点 #

• 使用game.betTypes?.map(...)：可选链操作符?.确保当betTypes未定义或为空时不会抛出错误
• 通过map遍历数组，为每个betType生成对应的ListGroup.Item
• 给每个列表项添加key={index}，符合React列表渲染的要求

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