时间戳

首页 > 解决方案 > 如何在下面的数据中添加搜索功能（理想情况下在另一个组件中）

reactjs - 如何在下面的数据中添加搜索功能（理想情况下在另一个组件中）

问题描述

如何在下面的数据中添加搜索功能（理想情况下在另一个组件中，导航组件）？我尝试通过道具和上下文传递数据，但根本无法让它工作。我需要能够按专辑名称、艺术家或可能的其他属性过滤数据。

import React, { Component, useEffect, useState} from 'react'
import axios from 'axios';
import '../components/data.css';


function Data() {
    const [Music, setMusic] = useState([], {});
useEffect(() => {
  axios.get('https://itunes.apple.com/us/rss/topalbums/limit=100/json')
  .then((data) => {
    setMusic(data.data.feed.entry);
    })
    .catch((err) => console.log(err));
},[]);


    return (
        <div>
            <article className="albums">
             <ul className="album-items">
                {Music.map(Music => {
                const  { id, name, label, title, artist, entry } = Music;
                return (
                <div className="album" >   
                <li className='album-list' key={id.attributes['im:id']}>
                <h3 className='title'>Album Name: {Music['im:name'].label}</h3>
                <img src={Music['im:image'][2].label} alt={Music['im:name'].label}/>
                <h4 className='title'>Artist: {Music['im:artist'].label}</h4>
                </li>   
                </div>
                );
                })}
            </ul>
            </article>
        </div>
    )
}

export default Data

标签： reactjs

解决方案

以下是如何根据album name和搜索专辑数据artist name。

工作应用程序：Stackblitz

在此处输入图像描述

import React, { Component, useEffect, useState } from "react";
import axios from "axios";

function Data() {
  const [Music, setMusic] = useState([], {});
  const [search, setSearch] = useState("");
  useEffect(() => {
    axios
      .get("https://itunes.apple.com/us/rss/topalbums/limit=100/json")
      .then(data => {
        setMusic(data.data.feed.entry);
      })
      .catch(err => console.log(err));
  }, []);

//======================================

  const handleSearch = event => {
    console.log(event.target.value);
    setSearch(event.target.value.toLowerCase());
  };

  const filtered = Music.length
    ? Music.filter(
        music =>
          music["im:name"]["label"].toLowerCase().includes(search) ||
          music["im:artist"]["label"].toLowerCase().includes(search)
      )
    : [];

//======================================

  return (
    <div>
      <input onChange={handleSearch} placeHolder={"search title, artist"} />
      <article className="albums">
        <ul className="album-items">
          {filtered.map(Music => {
            const { id, name, label, title, artist, entry } = Music;
            return (
              <div className="album">
                <li className="album-list" key={id.attributes["im:id"]}>
                  <h3 className="title">
                    Album Name: {Music["im:name"].label}
                  </h3>
                  <img
                    src={Music["im:image"][2].label}
                    alt={Music["im:name"].label}
                  />
                  <h4 className="title">Artist: {Music["im:artist"].label}</h4>
                </li>
              </div>
            );
          })}
        </ul>
      </article>
    </div>
  );
}

export default Data;

推荐阅读