Блог

Моя проблема в том, что я печатаю список фильмов с map помощью и хочу, чтобы список автоматически печатался после отправки без обновления страницы:

 
  const [movieName, setMovieName] = useState('');
  const [movieReview, setMovieReview] = useState('');
  const [movieReviewsList, setMovieReviewsList] = useState([]);

  useEffect(() => {

    Axios.get('http://localhost:3001/api/get')
      .then((response) => {
        setMovieReviewsList(response.data);
      })
    }, []);

    const submitReview = () => {
    
    Axios.post('http://localhost:3001/api/insert', {
      movieName: movieName, 
      movieReview: movieReview,
    });
    
    setMovieReviewsList([...movieReviewsList, {
      movieName: movieName, 
      movieReview: movieReview
    }]);
  }
 

После отправки базы данных я добавляю недавно добавленный фильм в список и пытаюсь сопоставить его так, чтобы новый фильм появлялся без обновления страницы:

 {movieReviewsList.map((movie) => {
  return (
   <div key={movie.idmovie_reviews}>
     <h3>Movie name: {movie.movie_name} </h3>
     <h3>Movie review: </h3>
     <p>{movie.movie_review}</p>
   </div>
  );
})}
 

Я не добавляю ключ при вставке значения в базу данных, где в моей базе данных SQL оно автоматически увеличивается. Есть ли какой-нибудь способ добавить его, чтобы я мог сопоставить его без обновления?

Ваше описание проблемы настолько короткое, что его невозможно решить. Я предполагаю, что ваш form отправлен на сервер как синхронизация.

 const onSubmit = (e: React.FormEvent) => {
  e.preventDefault()
  ...
}

<form onSubmit={onSubmit}>
  // ...
  <button type='submit'>submit</button>
</form>