如何在现有列表中显示搜索结果答案

【问题标题】：how to show search results inside existed list如何在现有列表中显示搜索结果
【发布时间】：2020-12-02 22:13:25
【问题描述】：

我有一个从 API 获取的曲目列表我实现了负责查找相应曲目的搜索栏但问题是，当我在搜索栏中输入任何内容时，会出现另一个曲目列表，并且它的过滤方式与我想过滤具有曲目和艺术家名称的已存在曲目列表的方式相同。我想我需要在地图方法中使用地图。

const TrackList = ({trackList}) => {

 const [searchTerm, setSerchTerm] = useState('')
 const [searchRes, setSearchRes] = useState([])

 const settingSearch = (e) => {
     e.preventDefault()
    setSerchTerm(e.target.value)
 }
 useEffect(() => {
        const res = trackList.map(i=> {
            return i.name
        })
        const filteredRes = res.filter(item => item.toLowerCase().includes(searchTerm))
        setSearchRes(filteredRes)
        
 }, [searchTerm])

    return (
        <div>
           <Container>
              <h1 className='mb-5 mt-5'>Top TrackList</h1>

              <FormControl type="text" 
                         placeholder="Search" 
                         className="mr-sm-2" 
                        value={searchTerm}
                        onChange={settingSearch}
                         
                         />
                           <ul>
                             { searchRes.map(i => (
                               <li>{i}</li>

                           )) }
                             </ul>
                   
                          
                {trackList.map(item => {
                    return (
                        
                        <Row className='mt-1' style={{padding: '5px', border: '1px solid #000', display: 'flex', justifyContent: 'flex-start', alignItems: 'center'}}>
                        <Col lg={1} md={1} sm={1}>
                        <a href={item.artist.url}><img src={item.image[1]['#text']} /></a>
                            
                        </Col>
                        <Col lg={11} md={11} sm={11}>
                         
                        <Link to={`/artist/${item.artist.name}`}><h6>{item.artist.name}</h6></Link>
                        <p>"{item.name}"</p>
                        </Col>
                        </Row>
                       

                    )
                })}
                         
          </Container>
        </div>
    )
}

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-hooks

【解决方案1】：

这是因为你 map 超过了 trackList 和 searchRes。

当页面像这样呈现时，您可能希望将searchRes 设置为等于trackList 中的数组

 const [searchRes, setSearchRes] = useState(trackList)

然后像这样在你的地图中使用它

{searchRes.map(item => {
    return (<Row className='mt-1' style={{padding: '5px', border: '1px solid #000', display: 'flex', justifyContent: 'flex-start', alignItems: 'center'}}>
...

并删除它

<ul>
    { searchRes.map(i => (
        <li>{i}</li>

    )) }
</ul>

如果您需要更多解释，请告诉我。

【讨论】：

如果我这样做，那么一旦我运行这个应用程序，我就只能看到搜索栏，当我输入数据时没有过滤器。但首先我需要查看上面的曲目列表和搜索，当我输入任何数据时，过滤的结果必须保留，其余的则消失。
查看我的更新答案（我更改了第一个代码块以删除useEffect），让我知道它现在是否有效。
这个想法是在开始时将trackList 的完整值分配给searchRes，并使用searchRes 首先显示所有曲目，然后过滤后仅显示过滤后的曲目。

【解决方案2】：

试试这个，你不需要 useeffect 只需设置过滤数组 onchange 输入并在下次添加你使用的所有文件，如 Container、FormControl 我不知道每个文件到底是什么，而且很难检查它是否正确

const TrackList = ({trackList}) => {
  const [searchRes, setSearchRes] = useState(trackList);

  const settingSearch = (e) => {
    e.preventDefault();

    const filteredRes = trackList.filter(item => item.name.toLowerCase().includes(e.target.value));
    setSearchRes(filteredRes)
  };

  return (
    <div>
      <Container>
        <h1 className='mb-5 mt-5'>Top TrackList</h1>
        <FormControl type="text"
                     placeholder="Search"
                     className="mr-sm-2"
                     onChange={settingSearch}
        />
        {searchRes.map(item => (
          <Row className='mt-1' style={{padding: '5px', border: '1px solid #000', display: 'flex', justifyContent: 'flex-start', alignItems: 'center'}}>
            <Col lg={1} md={1} sm={1}>
              <a href={item.artist.url}><img src={item?.image?.[1]['#text']} /></a>
            </Col>
            <Col lg={11} md={11} sm={11}>
              <Link to={`/artist/${item.artist.name}`}><h6>{item.artist.name}</h6></Link>
              <p>{item.name}</p>
            </Col>
          </Row>
        ))}
      </Container>
    </div>
  )
};

【讨论】：