Javascript 在这种情况下如何使用过滤器？反应

有人能帮我写一个函数来过滤我的搜索结果吗？ Sandobox中有以下代码：

类搜索扩展了React.Component{
状态={
搜索值：“”，
歌曲：[]，
音乐选项卡：[“随机”、“贝司”、“演奏者”、“和弦”、“吉他”]，
结果：“”
};
handleOnChange=事件=>{
this.setState（{searchValue:event.target.value}）；
};
handleSelectChange=事件=>{
这是我的国家(
{
结果：event.target.value
},
（）=>console.log（this.state.result）
);
};
handleSearch=（）=>{
this.makeApiCall（this.state.searchValue）；
};
makeApiCall=async searchInput=>{
让api_url=`https://www.songsterr.com/a/ra/songs/.json?pattern=${searchInput}`；
const response=wait fetch（api_url）；
const songs=wait response.json（）；
这个.setState（{songs}）；
};
render（）{
返回(
this.handleon更改（事件）}
value={this.state.SearchValue}
/>


搜寻
{这个州的歌(
{this.state.songs.map（（歌曲，索引）=>(
艺术家：{song.Artist.name}
歌曲标题：{Song.title}
可用选项卡：
{song.tabTypes.map（（选项卡，索引）=>(
{song.tabTypes[index]}
))}
))}
) : (
某物

)}
);
}
}
const Select=props=>{
const{optionValue，change}=props；
常量值musicTab=optionValue.map（（musicTab，索引）=>{
返回(
{" "}
{optionValue[index]}{”“}
);
});
返回(
{valueMusicTabs}
);
};

---

我想按输入值和选定值进行搜索。例如，如果我键入任何标题或歌曲名称并选择Bass，我希望使用歌曲/艺术家渲染结果，其中包括可用选项卡中的“Bass”。如果选择“随机”，则应呈现所有结果。请帮帮我，我不知道怎么做…

执行此操作实际上有多种方法。例如，您可以将过滤后的歌曲置于状态，然后在“渲染方法”中映射它们，或者您可以在“渲染方法”中过滤它们，正如我在下面所写的

render() {
return (
  <div>
    <input
      name="text"
      type="search"
      placeholder="Wyszukaj..."
      onChange={event => this.handleOnChange(event)}
      value={this.state.SearchValue}
    />

    <Select
      optionValue={this.state.musicTabs}
      change={this.handleSelectChange}
      value={this.state.result}
    />

    <br />
    <button onClick={this.handleSearch}>Search</button>

    {this.state.songs ? (
      <div>
       //you can filter your songs here then map them
       //so whenever result or songs is changed this will 
        {this.state.songs.filter(s => this.state.result === 'Random' || s.tabTypes.includes(this.state.result.toUpperCase())).map((song, index) => (
          <div key={index} className="lists">
            <h1>
              Artist: <span>{song.artist.name}</span>
            </h1>
            <h2>
              Song title: <span>{song.title}</span>
            </h2>
            <ol>
              <b>Available tabs:</b>
              {song.tabTypes.map((tab, index) => (
                <li key={index}> {song.tabTypes[index]} </li>
              ))}
            </ol>
          </div>
        ))}
      </div>
    ) : (
      <p>Something</p>
    )}
  </div>
);}

render（）{
返回(
this.handleon更改（事件）}
value={this.state.SearchValue}
/>


搜寻
{这个州的歌(
//您可以在此处筛选歌曲，然后将其映射
//所以，无论结果或歌曲何时更改，这都将
{this.state.songs.filter（s=>this.state.result==='Random'| | s.tabTypes.includes（this.state.result.toUpperCase（））.map（（歌曲，索引）=>(
艺术家：{song.Artist.name}
歌曲标题：{Song.title}
可用选项卡：
{song.tabTypes.map（（选项卡，索引）=>(
{song.tabTypes[index]}
))}
))}
) : (
某物

)}
);}

您可能需要根据值而不是输入名称更新“result”。您可以按如下方式设置输入值：

<option value={value} name={name} key={index}> 

因此，当您向用户显示适当的名称时，您可以获得适当的查询键

---

如果你在什么地方卡住了，请告诉我。我想我上面写的内容可以给你提供一些信息和想法。

这里有一个简单的筛选方法调用，用于根据选择的

this.state.result

比较结果。它不会完全适用于您的情况，因为您的下拉选择与json中返回的字符串不匹配。如果您希望使用此解决方案，则需要对过滤器进行一些修改，例如它适用于

“PLAYER”

、

“chord”

、和

“RANDOM”

，但不适用于

“TEXT\u BASS\u TAB”

或

“TEXT\u guitart\u TAB”

，因为它检查

此.state.result的文字字符串。也许键-值映射是一种可行的方法，其中键是您的下拉选项，值是json等价物。我还将您的歌曲值从const改为just be let，但这只是为了简化测试。这将使您开始使用最适合自己的解决方案

let songs = await response.json();
    if (this.state.result !== "Random" && this.state.result !== "") {
      songs = songs.filter(song =>
        song.tabTypes.includes(this.state.result.toUpperCase())
      );
    }
this.setState({ songs });

你想要下面这样的吗？这有点复杂，因为选项卡标识符与选择框中的字符串不匹配。如果代码对你有用，我可以添加一个带有一些解释的答案，以及你如何改进代码。是的，非常棒，非常感谢！
let songs = await response.json();
    if (this.state.result !== "Random" && this.state.result !== "") {
      songs = songs.filter(song =>
        song.tabTypes.includes(this.state.result.toUpperCase())
      );
    }
this.setState({ songs });