React表单二次提交才返回数组值问题求助

你的代码出现首次提交显示空值、第二次才显示输入内容的问题，核心原因是React的state更新是异步的：调用setMovieData后，movieData不会立刻变成新值，此时console.log(movieData)打印的是更新前的初始空数组；第二次提交时，movieData才会更新为第一次提交的内容，所以你看到的是旧值。另外，你单独维护movieData这个state完全没必要，反而增加了异步更新的困扰。

优化后的代码 #

直接在提交时基于当前表单状态生成数据，避免异步问题：

import React, { useState } from "react";

const Movieform = ({ setMovArray }) => {
  const [movieName, setMovieName] = useState("");
  const [ratings, setRatings] = useState("");
  const [duration, setDuration] = useState("");

  const HandleSubmit = (e) => {
    e.preventDefault();
    // 直接用当前表单输入生成最新数据
    const newMovieItem = {
      name: movieName,
      rating: ratings,
      duration: duration,
    };
    // 如果需要传递给父组件，更新父组件的数组
    setMovArray(prevArray => [...prevArray, newMovieItem]);
    // 直接打印新生成的数据，确保是最新值
    console.log([newMovieItem]);
  };

  return (
    <form onSubmit={HandleSubmit}>
      <input
        type="text"
        value={movieName}
        onChange={(e) => setMovieName(e.target.value)}
        placeholder="电影名称"
      />
      <input
        type="number"
        value={ratings}
        onChange={(e) => setRatings(e.target.value)}
        placeholder="评分"
      />
      <input
        type="text"
        value={duration}
        onChange={(e) => setDuration(e.target.value)}
        placeholder="时长"
      />
      <button type="submit">提交</button>
    </form>
  );
};

export default Movieform;

如果你一定要保留movieData state #

如果业务需要维护movieData这个state，想要看到更新后的值，可以用useEffect监听它的变化，在变化后打印：

import React, { useState, useEffect } from "react";

const Movieform = ({ setMovArray }) => {
  const [movieName, setMovieName] = useState("");
  const [ratings, setRatings] = useState("");
  const [duration, setDuration] = useState("");
  const [movieData, setMovieData] = useState([]);

  const HandleSubmit = (e) => {
    e.preventDefault();
    const newMovieData = [{
      name: movieName,
      rating: ratings,
      duration: duration,
    }];
    setMovieData(newMovieData);
  };

  // 监听movieData变化，更新后打印
  useEffect(() => {
    console.log(movieData);
  }, [movieData]);

  // 表单JSX部分同上
};

内容的提问来源于stack exchange，提问作者Fahad Hafeez