时间戳

首页 > 解决方案 > 如何在 useEffect() 中正确实现 setState()？

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

问题描述

如果这个 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;

标签： reactjsaxiossetstateuse-effectuse-state

解决方案

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

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

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

推荐阅读