在带有钩子的函数处理程序中使用 useRef

Question

我正在尝试提交一个发送 http 请求 onSubmit 的表单，但是在设置值的状态时我变得不确定。我不确定为什么在单击时不传递值并使用 set...() 函数进行设置。

下面是该组件的代码。第一次提交操作时，我收到错误消息，因为“surveyUserAnswers”未定义，但在下一次提交时它起作用了。不确定为什么？有人可以建议一下吗。

我对 typescript 和 react hooks 很陌生，所以请原谅我的代码！谢谢

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

import Loader from "../UI/loader/loader";

import axios from "axios";
import "./surveybox.css";

interface surveryAnswer {
  id: number;
  answers: string[];
}

const SurveyBox: React.FC = () => {
  const [surveyUserAnswers, setSurveyUserAnswers] = useState<surveryAnswer>();
  const [loading, setLoading] = useState(false);
  const programmingQRef = useRef<HTMLSelectElement>(null);
  const skillsQRef = useRef<HTMLSelectElement>(null);
  const stateManagementQRef = useRef<HTMLSelectElement>(null);
  const programmerTypeQRef = useRef<HTMLSelectElement>(null);

  const onSubmitSurvey = (e: React.FormEvent): void => {
    e.preventDefault();
    setLoading((prevLoading) => !prevLoading);
    setSurveyUserAnswers({
      id: Math.random(),
      answers: [
        programmerTypeQRef.current!.value,
        skillsQRef.current!.value,
        stateManagementQRef.current!.value,
        programmerTypeQRef.current!.value,
      ],
    });

    axios
      .post(`${DB_URL}/users-answers.json`, surveyUserAnswers)
      .then((res) => {
        setLoading((prevLoading) => !prevLoading);
      })
      .catch((error) => {
        console.log(error);
        setLoading((prevLoading) => !prevLoading);
      });
  };

  return (
    <div className="surveybox-container">
      {loading ? (
        <div className={"loader-holder"}>
          <Loader />
        </div>
      ) : (
        <React.Fragment>
          <h2>Quick survey!</h2>
          <form action="submit" onSubmit={onSubmitSurvey}>
            <label>favorite programming framework?</label>
            <select ref={programmingQRef} name="programming">
              <option value="React">React</option>
              <option value="Vue">Vue</option>
              <option value="Angular">Angular</option>
              <option value="None of the above">None of the above</option>
            </select>
            <br></br>
            <label>what a junior developer should have?</label>
            <select ref={skillsQRef} name="skills">
              <option value="Eagerness to lear">Eagerness to learn</option>
              <option value="CS Degree">CS Degree</option>
              <option value="Commercial experience">
                Commercial experience
              </option>
              <option value="Portfolio">Portfolio</option>
            </select>
            <br></br>
            <label>Redux or Context Api?</label>
            <select ref={stateManagementQRef} name="state-management">
              <option value="Redux">Redux</option>
              <option value="Context Api">Context Api</option>
            </select>
            <br></br>
            <label>Backend, Frontend, Mobile?</label>
            <select ref={programmerTypeQRef} name="profession">
              <option value="Back-end">back-end</option>
              <option value="Front-end">front-end</option>
              <option value="mobile">mobile</option>
            </select>
            <br></br>
            <button type="submit">submit</button>
          </form>
        </React.Fragment>
      )}
    </div>
  );
};

export default SurveyBox;

Answer 1

设置状态是一个异步操作，更新后的状态只会在下一次渲染时可用。

在您的情况下，默认状态是 undefined，这是您在第一次提交时发送的内容。现在状态更新了，再次提交时，发送之前的答案，以此类推...

为了解决这个问题，准备一个const(newAnswer)，并将其设置为状态，并在api调用中使用它。

注意：在您的情况下，您根本没有使用 surveyUserAnswers，因此您可以完全删除此状态。

const onSubmitSurvey = (e: React.FormEvent): void => {
  e.preventDefault();
  setLoading((prevLoading) => !prevLoading);

  const newAnswer = {
    id: Math.random(),
    answers: [
      programmerTypeQRef.current!.value,
      skillsQRef.current!.value,
      stateManagementQRef.current!.value,
      programmerTypeQRef.current!.value,
    ],
  }

  setSurveyUserAnswers(newAnswer);

  axios
    .post(`${DB_URL}/users-answers.json`, newAnswer)
    .then((res) => {
      setLoading((prevLoading) => !prevLoading);
    })
    .catch((error) => {
      console.log(error);
      setLoading((prevLoading) => !prevLoading);
    });
};

在带有钩子的函数处理程序中使用 useRef

Using useRef in inside a function handler with hooks

typescript

reactjs

react-hooks

use-state