React Hooks with Axios，更新状态，下拉列表没有重复项

Question

我是 React Hooks 的新手，也是 React 的新手。我正在尝试生成一个从我的服务器中提取值的下拉列表。我无法从列表中删除重复项。此代码可能需要大量重新工作，但我们将不胜感激。我在下面包含 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)

Answer 1

react 状态是不可变的，你不能直接改变 mood_list 和 genre_list，你应该这样做：

useEffect(() => {
  const fetchData = async () => {
    let { data = { songs = [] } = {} } = await axios.get('/api/songs')
    setItems(songs);
    setMood([...new Set(songs.map(x => x.mood))]);
    setGenre([...new Set(songs.map(x => x.genre))]);
  }
  fetchData();
}, []);

React Hooks with Axios，更新状态，下拉列表没有重复项

React Hooks with Axios, updating state with no duplicates for drop down list

duplicates

reactjs

dropdown

axios

react-hooks