Question

我做了一个方法checkAddedTrack（），它检查搜索到的元素是否添加到了用户播放列表中，但是我认为这个方法有点愚蠢，您能给我一个建议吗，我该如何以另一种简单的方式使它，或更聪明？

先谢谢您！

function SearchListItem(props) {
  const {id, playlist, isSelected, clickHandler, index, title_short, duration, onClickAdd} = props;


  const checkAddedTrack = () => {
    let isTrackAdded = false;
    playlist.map(track => {
      if (track.id === id) {
        isTrackAdded = true;
      }
    });
    return isTrackAdded;
  };

  return (
    <div>
      <li className={isSelected ? `active-song` : ``} onClick={() => {
        clickHandler(index)
      }}>
        {index + 1 + ' . '}{title_short} {formatTime(duration)}
      </li>
      <button disabled={checkAddedTrack()} onClick={onClickAdd}>
        <i className={!checkAddedTrack() ? `fa fa-plus` : `fa fa-minus`}> </i>
      </button>
    </div>
  );
}

Answer 1

是的，它超出了您的需要，您可以为此使用Array#some方法：

const checkAddedTrack = () => playlist.some(track => track.id === id)

该方法将返回一个布尔值，具体取决于该数组的一项或多项是否满足条件。

将此示例用作播放列表，您可以非常轻松地使用该功能：

const playlist = [{id:1}, {id:2}, {id:3}, {id:4}, {id:5}, {id:6}, {id:7}, ];
let id = 5;

const checkAddedTrack = () => playlist.some(track => track.id === id)

console.log(checkAddedTrack())

id = 10;

console.log(checkAddedTrack())

如何简化元素搜索方法？

1 个答案: