Блог

В настоящее время я визуализирую список песен, в котором есть кнопка переключения, которую я сделал, чтобы отобразить форму для добавления песни. Как я могу сделать так, чтобы при отправке этой формы она скрывала форму без нажатия кнопки. Я попытался создать эффект использования для запуска функции, но не смог ее взломать. Заранее спасибо.

Список песен

 import { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux';  import { deleteSong, getSongs, updateSong } from '../../store/song';  import ReactAudioPlayer from 'react-audio-player'; import { useHistory } from 'react-router'; import SongForm from '../AddSongForm'; import EditSongForm from '../EditSongForm'; import SpecificSong from '../SpecificSong';  const SongList = () =gt; {   const [addShowForm, setAddShowForm] = useState(false);  // const [editShowForm, setEditShowForm] = useState(false);   const history = useHistory()  const dispatch = useDispatch();   const songsObj = useSelector((state) =gt; state.songState.entries);  const songs = Object.values(songsObj)   const user = useSelector((state) =gt; state.session.user);  const CurrentUserId = user?.id   const remove = (e) =gt; {  dispatch(deleteSong(e.target.id));  }    const addFormCheck = (e) =gt; {  if (addShowForm) setAddShowForm(false)  if (!addShowForm) setAddShowForm(true)  }  // const editFormCheck = (e) =gt; {  // if (editShowForm) setEditShowForm(false)  // if (!editShowForm) setEditShowForm(true)  // }   useEffect(() =gt; {  dispatch(getSongs());  }, [dispatch]);    return (  lt;divgt;  lt;divgt;  lt;button onClick={addFormCheck}gt;add a songlt;/buttongt;  {addShowForm ?  lt;SongForm /gt;  : null}  lt;/divgt;  lt;h1gt;Song Listlt;/h1gt;  lt;olgt;  {songs.map(({ id, songName, songLink, userId }) =gt; (  lt;divgt;  lt;SpecificSong id={id} songName={songName} songLink={songLink} userId={userId} /gt;  lt;/divgt;  ))}  lt;/olgt;  lt;/divgt;  ); }; export default SongList;  

И компонент, который визуализируется

 import { useState } from "react"; import { useDispatch } from "react-redux";  import { postSong } from "../../store/song";  import { useSelector } from "react-redux";    import Axios from 'axios'  const SongForm = () =gt; {  const dispatch = useDispatch();   const [songName, setSongName] = useState("");  const [songLink, setSongLink] = useState("");  const [errors, setErrors] = useState([]);   const [songSelected, setSongSelected] = useState("")   const reset = () =gt; {  setSongName("");  setSongLink("");   };  const user = useSelector((state) =gt; state.session.user);  const userId = user?.id   let url;   const handleSubmit = async (e) =gt; {  e.preventDefault();   const formData = new FormData()  formData.append('file', songSelected)  formData.append('upload_preset', 'd3gthd7l')   if (songSelected === '') {  setErrors(['You have to upload an audio file!'])  }   Axios.post("https://api.cloudinary.com/v1_1/dyhfkvy6u/video/upload", formData).then(async (response) =gt; {  if (response.data.url) url = response.data.url  const newSong = {  songName,  songLink: url,  userId  };  const song = await dispatch(postSong(newSong))  .catch(async (res) =gt; {  const data = await res.json()  if (data amp;amp; data.errors) setErrors(data.errors)  })    })   // reset();  };    return (  lt;div className="inputBox"gt;  lt;h1gt;Add A Songlt;/h1gt;  lt;ulgt;  {errors.map((error, idx) =gt; lt;li className='errors' key={idx}gt;{error}lt;/ligt;)}  lt;/ulgt;  lt;form onSubmit={handleSubmit}gt;  lt;input  type="text"  onChange={(e) =gt; setSongName(e.target.value)}  value={songName}  placeholder="Song Name"  name="Song Name"  /gt;  lt;input  type='file'  onChange={(e) =gt; { setSongSelected(e.target.files[0]) }}  placeholder="Song Link"  name="Audio File"  /gt;  lt;button type="submit"gt;Submitlt;/buttongt;    lt;/formgt;  lt;/divgt;  ); };  export default SongForm;  

Вы можете передать setAddShowForm функцию в форму в качестве реквизита и обновить ее состояние после отправки (обратите внимание, что вы можете использовать amp;amp; ее для условного рендеринга).:

 lt;divgt;  lt;button onClick={addFormCheck}gt;add a songlt;/buttongt;  {addShowForm amp;amp; lt;SongForm setAddShowForm={setAddShowForm}/gt;} lt;/divgt;  

Измените объявление компонента на

 const SongForm = ({ setAddShowForm }) =gt; {  

И обновите состояние в handleSubmit методе:

 const handleSubmit = async (e) =gt; {  e.preventDefault();    const formData = new FormData();  formData.append('file', songSelected);  formData.append('upload_preset', 'd3gthd7l');    if (songSelected === '') {  setErrors(['You have to upload an audio file!']);  }    Axios.post(  'https://api.cloudinary.com/v1_1/dyhfkvy6u/video/upload',  formData  ).then(async (response) =gt; {  if (response.data.url) url = response.data.url;  const newSong = {  songName,  songLink: url,  userId,  };  const song = await dispatch(postSong(newSong)).catch(async (res) =gt; {  const data = await res.json();  if (data amp;amp; data.errors) setErrors(data.errors);   // Hide the form   setAddShowForm(false);  });  });  };   

Вы не можете вызвать эффект использования с изменением переменной отправки. Отправка является крючком и не меняется после вызова. Вам нужно создать переменную состояния useState и изменить ее значение при изменении, когда вы это сделаете, включите эту переменную в useEffect вместо отправки, и это вызовет содержимое useEffect.