Как правильно реализовать setState () внутри useEffect ()?

Question

Если этот useEffect () запускается один раз (используя [] в качестве второго параметра), setTicket (response.data) не обновляет значение заявки данными. Если я запускаю useEffect () с параметром [ticket], он обновляет значение билета с данными, но useEffect становится бесконечным l oop.

Мне нужно, чтобы он был запущен один раз и обновил данные билета , Я не думаю, что понимаю 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