如何在 useEffect() 中正确实现 setState()？

Question

如果这个 useEffect() 运行s 一次（使用 [] 作为第二个参数），setTicket(response.data) 不会用数据更新 ticket 的值。如果我运行 useEffect() 以 [ticket] 作为参数，它会用数据更新 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 的目的是告诉组件重新渲染。在下一次渲染时，将创建一个具有新值的新局部变量。

您的代码已经按照应有的方式编写，只是您的日志语句没有为您提供任何有用的信息。如果您想看到它使用新值重新呈现，您可以将日志语句移动到组件的主体。

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

如何在 useEffect() 中正确实现 setState()？

How do I correctly implement setState() within useEffect()?

setstate

reactjs

axios

use-effect

use-state