我如何在useEffect（）中正确实现setState（）？

Question

如果此useEffect（）运行一次（使用[]作为第二个参数），则setTicket（response.data）不会使用数据更新票据的值。如果我以[ticket]作为参数运行useEffect（），它将使用数据更新ticket的值，但是useEffect成为一个无限循环。

我需要运行一次并更新故障单数据。我认为我不了解useEffect（）及其第二个参数。

我该怎么做才能获得预期的结果？

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

const EditTicket = (props) => {
  const [ticket, setTicket] = useState("");
  useEffect(() => {
    axios
      .get("http://localhost:4000/tickets/" + props.match.params.id)
      .then((response) => {
        setTicket(response.data);
        console.log({ ticket });
      })
      .catch(function (error) {
        console.log(error);
      });
  }, []);

  return <div>edit</div>;
};

export default EditTicket;

Answer 1

ticket是本地const。它永远不会改变，这不是setTicket想要做的。 setTicket的目的是告诉组件重新渲染。在下一个渲染中，将使用新值创建一个新的局部变量。

您的代码已经按照应编写的方式编写，但您的日志语句没有为您提供任何有用的信息。如果您希望看到它使用新值重新渲染，则可以将log语句移至组件主体。

const EditTicket = (props) => {
  const [ticket, setTicket] = useState("");
  console.log('rendering', ticket);
  useEffect(() => {
    // same as before