javascript - 新数据提交后在 React 中使用钩子映射数据

Question

我的问题是我打印电影列表，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 数据库中它是自动递增的。有没有办法添加它，这样我就可以在不刷新的情况下映射它？

标签： javascriptreactjs

Answer 1

您的问题描述太短了，无法解决。我猜你form是作为同步提交到服务器的。

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

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