React 在 *.map 中渲染时不会渲染数组的第一个对象答案

【问题标题】：React won't render the first object of the array while rendering inside *.mapReact 在 *.map 中渲染时不会渲染数组的第一个对象
【发布时间】：2020-11-20 00:59:43
【问题描述】：

在渲染 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()


    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[] 的第二个对象开始渲染。

【问题讨论】：

map 不只是跳过条目。如果条目在那里，它将被处理。唯一想到的是，如果它是一个 sparse 数组，则不会访问其中的间隙。请使用 minimal reproducible example 来更新您的问题，以展示问题，最好是使用 Stack Snippets（[<>] 工具栏按钮）的 runnable 问题。 Stack Snippets 支持 React，包括 JSX； here's how to do one.
为什么不用用户替换 this.state.searchtrack[i]？

标签： javascript arrays reactjs components

【解决方案1】：

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

【讨论】：