新数据提交后在 React 中使用钩子映射数据答案

【问题标题】：Mapping data with hooks in React after new data submit新数据提交后在 React 中使用钩子映射数据
【发布时间】：2020-12-16 08:05:14
【问题描述】：

我的问题是我用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 数据库中它是自动递增的。有什么方法可以添加它，这样我就可以在不刷新的情况下映射它？

【问题讨论】：

你能让你的 /api/insert 端点返回插入的电影吗？

标签： javascript reactjs

【解决方案1】：

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

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

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

【讨论】：