我是新来反应钩子的人,而且还很新来反应。我正在尝试生成一个下拉列表,用于从服务器中提取值。我无法从列表中删除重复项。这段代码可能需要大量的工作,但任何帮助将不胜感激。我在下面添加了songform.js,然后添加了我的mongodb信息。
SONGFORM.JS
import React, { useState, useEffect } from "react";
import axios from "../../axios-orders";
import useDropdown from '../../components/dropdown/Dropdown';
const SongForm = (props => {
const [mood_list, setMood] = useState([]);
const [genre_list, setGenre] = useState([]);
const [items, setItems] = useState([]);
const [enteredSong, setEnteredSong] = useState('');
const [selectedGenre, GenreDropdown] = useDropdown('Genre', 'empty', genre_list);
const [selectedMood, MoodDropdown] = useDropdown('Mood', 'empty', mood_list);
useEffect(() => {
const fetchData = async () => {
let response = await axios.get('/api/songs')
setItems(response.data.songs);
}
fetchData();
}, []);
let i = 0;
for (i = 0; i < items.length; i++) {
genre_list.push(items[i].genre)
}
let j = 0;
for (j = 0; j < items.length; j++) {
mood_list.push(items[j].mood)
}
const submitHandler = (event) => {
event.preventDefault();
props.filterSongs({
genre: selectedGenre,
mood: selectedMood,
songSearch: enteredSong,
});
};
return (
<div className="filter-page">
<form onSubmit={submitHandler}>
{/* Search Filter */}
<div className="centered-flex-container">
<h1>Search By Name:</h1>
<input
className='searchbar'
type="text"
id="songInput"
value={enteredSong}
onChange={event => {
setEnteredSong(event.target.value);
}}
/>
<hr></hr>
</div>
<div className='centered-flex-container'>
<h1>Search By Filter:</h1>
<GenreDropdown />
</div>
<div className='centered-flex-container'>
<MoodDropdown />
</div>
<div className='centered-flex-container'>
<button
className='dark-button'
type="submit"
>
Submit
</button>
</div>
</form>
</div>
)
});
export default SongForm;
IMPORTED DATA FROM AXIOS AND MONGODB
console.log(response.data.songs) shows
(5) [{…}, {…}, {…}, {…}, {…}]
0:
audio: "midwest_money.mp3"
genre: "Rap/Hip-Hop"
id: "5edd0cdc38cb55332ccbd8f6"
mood: "Relaxed"
name: "Midwest Money"
_id: "5edd0cdc38cb55332ccbd8f6"
__proto__: Object
1: {_id: "5edd0cdc38cb55332ccbd8f2", name: "Invincible", genre: "Electronic/Pop", mood: "Uplifting", audio: "invincible.mp3", …}
2: {_id: "5edd0cdc38cb55332ccbd8f4", name: "Sun Kiss", genre: "Electronic/Pop", mood: "Energetic", audio: "sun_kiss.mp3", …}
3: {_id: "5edd0cdc38cb55332ccbd8f5", name: "Wormhole", genre: "Electronic/Pop", mood: "Energetic", audio: "wormhole.mp3", …}
4: {_id: "5edd0cdc38cb55332ccbd8f3", name: "Pier Light", genre: "Country", mood: "Uplifting", audio: "pier_light.mp3", …}
length: 5
__proto__: Array(0)
反应状态是不可变的,您不能对mood_list
和genre_list
进行突变,您应该这样做:
useEffect(() => {
const fetchData = async () => {
let { data = { songs = [] } = {} } = await axios.get('/api/songs')
setItems(songs);
setMood(songs.map(x => x.mood);
setGenre(songs.map(x => x.genre);
}
fetchData();
}, []);