在*.map内部呈现时，React不会呈现数组的第一个对象

Question

在呈现SearchCard组件时，它不会显示数组的第一个对象-

    const cardArrayTrackSearch = this.state.searchtrack.map((user, i) => {
        return (
            <SearchCard key={i}
            reload={this.props.reload}
            song={this.state.searchtrack[i].trackName} 
            artist={this.state.searchtrack[i].artistName}
            art={this.state.searchtrack[i].artworkUrl100}/>
                );
            
    })  

这是我的SearchCard组件的呈现()

    render() {

    const titleCase = (str) => {
       var splitStr = str.toLowerCase().split(' ');
       for (var i = 0; i < splitStr.length; i++) {
           splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);     
       }
       return splitStr.join(' '); 
    }

    var {song, artist,art} = this.props;
    song = song.replace(/ \([\s\S]*?\)/g, '');
    song = titleCase(song);

    return (

        <div className='button bg-image1 light-blue dib br3 grow tc bw2 shadow-5 flex items-center bb b--black-10' onClick={() => this.getUrl(`${song} ${artist} lyrics`)} >
            <img className= '' src={art} alt='artwork' />
            <dl className="pl3 flex-auto">
              <dt className="clip">Title</dt>
              <dd className="ml0 white truncate w-100">{song}</dd> 
              <dt className="clip">Artist</dt>
              <dd className="ml0 gray truncate w-100">{artist}</dd>
            </dl>
        </div>
        );
    }

在渲染时，会跳过第一个对象，并从数组this.state.searchtrack[]的第二个对象开始渲染。

Answer 1

问题出在样式上，tacheon类拼写错误。地图返回是正确的