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

【问题标题】：How do I correctly implement setState() within useEffect()?如何在 useEffect() 中正确实现 setState()？
【发布时间】：2020-08-07 08:00:21
【问题描述】：

如果这个 useEffect() 运行一次（使用 [] 作为第二个参数）， setTicket(response.data) 不会用数据更新票证的值。如果我以 [ticket] 为参数运行 useEffect()，它会使用数据更新票证的值，但 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;

【问题讨论】：

那就是你如何使用它。但是绑定到票证的值要到下一次组件被渲染时才会更新，所以console.log是没有意义的。

标签： reactjs axios setstate use-effect use-state

【解决方案1】：

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

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

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

【讨论】：