React 中的 OnSubmit

Question

无法弄清楚为什么 onSubmit 函数工作不正常。

我有组件 InputForm:

import React, { useState, useRef, useEffect } from "react";
import Input from "../UI/Input";
import TextArea from "../UI/TextArea";
import Comments from "./Comments";
import classes from "./InputForm.module.css";
import Button from "../UI/Button";

const InputForm = (props) => {
  const [userInput, setUserInput] = useState({ userName: "", userText: "" });
  const [comments, setComments] = useState([]);

  const nameInput = useRef();
  const commentText = useRef();

  const submitHandler = (event) => {
    event.preventDefault();
    const enteredName = nameInput.current.value;
    const enteredText = commentText.current.value;

    setUserInput({ userName: enteredName, userText: enteredText });
    setComments((prev) => {
      return [...prev, userInput];
    });
  };

  console.log(comments);

  return (
    <div>
      <form className={classes.inputForm} onSubmit={submitHandler}>
        <Input
          ref={nameInput}
          label="Your Name"
          input={{
            id: "name",
            type: "text",
            placeholder: "Hello, what's your name?",
          }}
        />
        <TextArea
          ref={commentText}
          label="Comment Out"
          inputTextArea={{
            name: "comment",
            id: "comment",
            cols: "30",
            rows: "4",
            placeholder:
              "So sweet image, isn't it ah..? Comment out, don't be shy...",
          }}
        />
        <Button buttonText="Leave comment" />
      </form>
      <Comments userData={comments} />
    </div>
  );
};

export default InputForm;
**strong text**

我获取用户名和文本数据并将其发送到其他组件评论:

import React from "react";
import { Fragment } from "react/cjs/react.production.min";
import classes from "./Comment.module.css";

const Comments = (props) => {
  const userData = props.userData;
  console.log(userData.length);
  const comments = userData.map((user) => {
    return (
      <div className={classes.comment}>
        <h3>{user.userName}</h3>
        <p className={classes.commentText}>{user.userText}</p>
      </div>
    );
  });

  return <Fragment>{comments}</Fragment>;
};

export default Comments;

问题是当我点击按钮提交时，我得到空数据，当我第二次点击时我得到用户数据，为什么会这样？

结果如图。

Answer 1

这是因为您在 userInput 状态更新后立即更新评论状态。

状态更新仅存在于下一次渲染中，因此您传递给 setComments 的用户输入仍然是您设置的初始值。

尝试使用useEffect更新评论，去掉setUserInput下的setComments

useEffect(()=>{
  setComments(prev=> [...prev, userInput)
},[userInput])

React 中的 OnSubmit

OnSubmit in React

javascript

reactjs

forms

submit