Javascript 使用React在映射的API数据中获取列表项的值很困难

我在从列表项中获取特定数据时遇到了一些困难，这些数据来自使用React映射的API

在我的渲染中，我映射了一个艺术家列表，在此基础上，它将渲染艺术家名称、歌曲标题和乐谱的URL：

render(){
    return(
        <div className="songContainerOuter">
            {this.props.artist.map((artist, i) => {
                return (
                    <div className="songContainerInner" key={i}>
                        <ul>
                            <div className="leftSide">
                                <li ref={ref => this.artistName = ref}>{artist}</li>
                            </div>
                            <div className="rightSide">
                                <div className="topRight">
                                    <li ref={ref => this.songTitle = ref}>{this.props.title[i]}</li>
                                </div>
                                <div className="bottomRight">
                                    <li ref={ref => this.songUrl = ref}><a href={`${this.props.link[i]}`}><i className="fas fa-link"></i></a></li>
                                    <li onClick={this.addFavourite}><i className="fas fa-plus"></i></li>
                                </div>
                            </div>
                        </ul>
                    </div>
                )
            })}
        </div>
    )
}

---

是否有其他方法在li标记中存储值，并且仅在每个映射的div中存储唯一的值

@anbhd，您能做以下更改并测试它吗： 将以下部分添加到构造函数部分：

并更改onClick函数，如下所示：

<li onClick={this.addFavourite(artist)}><i className="fas fa-plus"></i></li>

---

问题是您正试图在setState之后获取数据。setState是异步操作，因此您将获得旧数据。尝试将日志放入setState回调中

    addFavourite(e){
        e.preventDefault();
        const favs ={
            artist: this.artistName.textContent,
            title: this.songTitle.textContent,
            url: this.songUrl.textContent.outerHTML,
        };
        const newFavs = Array.from(this.state.favourites);
        newFavs.push(favs);
        this.setState({
            favourites: newFavs
        },()=>{
       console.log(this.state.favourites)//inside setState callback
})
       }

---

请尝试以下方法。如果您想检查您的状态是否已正确更新，请参阅@Ved answer

addFavourite(artist, songIndex){
    const fav = {
        artist,
        title: this.props.title[songIndex],
        url: this.props.link[songIndex]
    };

    const newFavs = Array.from(this.state.favourites);
    newFavs.push(favs);

    this.setState({
        favourites: newFavs
    });
}

render(){
    return (
        <div className="songContainerOuter">
            {this.props.artist.map((artist, i) => {

                const { link, title } = this.props;

                return (
                    <div className="songContainerInner" key={i}>
                        <ul>
                            <div className="leftSide">
                                <li>{artist}</li>
                            </div>
                            <div className="rightSide">
                                <div className="topRight">
                                    <li>{title[i]}</li>
                                </div>
                                <div className="bottomRight">
                                    <li><a href={`${link[i]}`}><i className="fas fa-link"></i></a></li>
                                    <li onClick={event => this.addFavourite(artist, i)}><i className="fas fa-plus"></i></li>
                                </div>
                            </div>
                        </ul>
                    </div>
                )
            })}
        </div>
    )
}

---

请发一封道歉信，我已经用这种方式设置了构造器。如果我将li onClick更改为您建议的，我将无法获取任何数据，因此这不起作用。请您将其更改为onClick={this.addFavoriteArtist}，并将您的函数更改为`addFavoriteArtist{console.logartist}``谢谢！它起作用了！昨晚我有一个不同的解决方案，我只是点击document.getElementById，但我不确定这是否不像你的解决方案那么优雅。我将更深入地了解这一点。

    addFavourite(e){
        e.preventDefault();
        const favs ={
            artist: this.artistName.textContent,
            title: this.songTitle.textContent,
            url: this.songUrl.textContent.outerHTML,
        };
        const newFavs = Array.from(this.state.favourites);
        newFavs.push(favs);
        this.setState({
            favourites: newFavs
        },()=>{
       console.log(this.state.favourites)//inside setState callback
})
       }

addFavourite(artist, songIndex){
    const fav = {
        artist,
        title: this.props.title[songIndex],
        url: this.props.link[songIndex]
    };

    const newFavs = Array.from(this.state.favourites);
    newFavs.push(favs);

    this.setState({
        favourites: newFavs
    });
}

render(){
    return (
        <div className="songContainerOuter">
            {this.props.artist.map((artist, i) => {

                const { link, title } = this.props;

                return (
                    <div className="songContainerInner" key={i}>
                        <ul>
                            <div className="leftSide">
                                <li>{artist}</li>
                            </div>
                            <div className="rightSide">
                                <div className="topRight">
                                    <li>{title[i]}</li>
                                </div>
                                <div className="bottomRight">
                                    <li><a href={`${link[i]}`}><i className="fas fa-link"></i></a></li>
                                    <li onClick={event => this.addFavourite(artist, i)}><i className="fas fa-plus"></i></li>
                                </div>
                            </div>
                        </ul>
                    </div>
                )
            })}
        </div>
    )
}