React函数组件中使用三元表达式报错问题求助

错误根源 #

1. 三元表达式结构断裂：map回调里的return对应的括号没闭合，箭头函数的大括号也没收尾，导致解析器到冒号位置时无法识别语法结构，抛出预期符号的错误。
2. Fetch配置格式错误：请求头的Content-type被写在headers对象外面，属于无效配置。
3. 数据访问逻辑错误：Spotify接口返回的artists是数组，直接用artists.name拿不到值，应该取数组首个元素的name。

修正后的完整代码 #

import React, { useState, useEffect } from 'react';

export const Cards = () => {
  const Url = 'https://api.spotify.com/v1/browse/new-releases';
  const [data, setData] = useState({}); // 初始值设为空对象更合理，避免数组判断混淆

  const getData = async () => {
    let token = window.localStorage.getItem('token');
    try {
      const response = await fetch(Url, {
        headers: {
          Authorization: `Bearer ${token}`,
          'Content-type': 'application/json' // 移到headers内部
        }
      });
      
      const fetchedData = await response.json();
      setData(fetchedData);
      console.log(fetchedData.albums.items[0]?.name); // 可选链避免报错
      console.log(fetchedData.albums?.items);
    } catch (err) {
      console.error('请求失败:', err);
    }
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <>
      {data?.albums?.items ? (
        data.albums.items.map((item) => {
          const { artists, id, images, name } = item;
          return (
            <div 
              key={id} // key要放在最外层的div上
              className='card-content' 
              style={{
                width: '13.5rem', 
                height:'17rem', 
                backgroundColor: '#242424', 
                margin:'auto 0rem', 
                borderRadius:'0.75rem'
              }}
            >
              <div>
                <img src={images[0].url} alt={name} /> {/* 添加alt属性优化可访问性 */}
              </div>
              <h4>{name}</h4>
              <p>{`by ${artists[0].name}`}</p> {/* 取数组第一个艺术家的name */}
            </div>
          );
        })
      ) : (
        <p>暂无数据</p>
      )}
    </>
  );
};

额外优化点 #

• 初始状态从[]改为{}，更贴合接口返回的对象结构，配合可选链?.简化判断逻辑。
• 给fetch添加try/catch捕获请求异常，避免页面崩溃。
• 将key属性移到map返回的最外层DOM元素上，符合React的key规范。
• 给图片添加alt属性，优化页面可访问性。

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