在反应jsx中一次遍历一个数组

Posted 2023-02-22

【中文标题】在反应jsx中一次遍历一个数组

【英文标题】：Iterating through array one at a time in react jsx

【发布时间】：2020-09-17 16:27:01

【问题描述】：

如何在 react jsx 的数组“tracks”中一次迭​​代一个索引。我希望能够在数组中一次只迭代和显示一个轨道，并通过单击标记为“下一个”的按钮转到下一个轨道（索引），当点击“上一个”按钮。

  constructor(props)
     super(props);
     this.state=(
        year: (props.location.state && props.location.state.year) || '',
        all_tracks: tracks:[],
        currentTrack: 0,
     );
  
  onClickNext() //Next button
      //Nothing done here yet
  
  onClickPrev() //Previous button
      //Nothing done here yet
  
  render()
    const 
      currentTrack,
      all_tracks:  tracks 
     = this.state;
    return (
        window.addEventListener('DOMContentLoaded', (event) =>  
            this.gettingTracks() //Have tracks load immediately
        ),
       <div id = "song"> //THIS PART
              <iframe id="track" src=tracks[currentTrack]
                           ? "https://open.spotify.com/embed/track/"+tracks[currentTrack].id
                           : "Song N/A" ></iframe>
       </div>
       <div>
            <button id="nextBtn"> Next </button>
       </div>
       <div>
            <button id="prevBtn"> Previous </button>
       </div>
     );
  

这是我填充轨道数组的地方

    gettingTracks()
    // store the current promise in case we need to abort it
    if (prev !== null) 
        prev.abort();
    
    // store the current promise in case we need to abort it
    prev = spotifyApi.searchTracks('genre: pop year:' + this.state.year, limit: 20, offset:1);
    prev.then((data) => 
        this.setState(
          all_tracks:  
              tracks: data.tracks.items
            
        )
        prev = null;
    , function(err) 
        console.error(err);
    );

【参考方案1】：

您可以将当前曲目的索引存储为状态变量。而不是遍历轨道来显示它们，您可以简单地显示当前轨道。

这是一个简单的例子，

import React from "react";

export default class App extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      all_tracks: 
        tracks: []
      ,
      currentTrack: 0
    ;

    this.onClickNext = this.onClickNext.bind(this);
    this.onClickPrev = this.onClickPrev.bind(this);
  

  componentDidMount() 
      // fetch the data  from the Spotify API and update this.state.all_tracks.tracks

  

  onClickNext() 
    //Next button
    this.setState(prevState => 
      if (this.state.currentTrack === this.state.all_tracks.tracks.length - 1) 
        return;
      

      return 
        ...prevState,
        currentTrack: prevState.currentTrack + 1
      ;
    );
  
  onClickPrev() 
    //Previous button
    this.setState(prevState => 
      if (this.state.currentTrack === 0) 
        return;
      

      return  ...prevState, currentTrack: prevState.currentTrack - 1 ;
    );
  
  render() 
    const 
      currentTrack,
      all_tracks:  tracks 
     = this.state;

    // before rendering tracks[currentTrack].name check if tracks[currentTrack] exist

    return (
      <>
        <div>
          <h3>Current Track</h3>
          <h4>
           
             tracks[currentTrack] 
                ? tracks[currentTrack].name 
                : 'track does not exist'
           
          </h4>
        </div>
        <div>
          <button id="nextBtn" onClick=this.onClickNext>
            Next
          </button>
        </div>
        <div>
          <button id="prevBtn" onClick=this.onClickPrev>
            Previous
          </button>
        </div>
      </>
    );
  

查看codesandbox 以获取演示

【讨论】：

更新沙盒解决方案codesandbox

我很高兴它有帮助。

我将创建一个具有最佳解决方案的沙箱，但如果不查看您在代码中尝试的内容，很难说出您收到错误的原因。

codesandbox，您可以使用重复队列更新沙盒示例。

如果我不得不猜测为什么会出现警告 shouldn't setState inside a setState，可能是因为您试图在另一个 setState 内部使用 setState 有条件地更改 currentTrack。