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（）


    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类拼写错误。地图返回正确

React在* .map内部渲染时不会渲染数组的第一个对象

1 个答案: