如何在 useEffect 中更新 useRef 变量的值

Question

我正在错误跟踪器项目中构建一个网页，用户可以在登录后在图表中查看某些类型的票证。我通过在函数 getTickets() 中进行 api 调用来检索这些票证，并设置它们作为状态。我有一个 useEffect，它包含一个映射票证的函数，并将每种类型的票证数量保存在 useRef vars 中。然后这些变量被设置在 data() 中，它为图表设置数据。

我将如何更新这些 useRefs？当我记录这些 useRefs 时，它们都是空的。另外，由于 setChartData() 是异步的，我是否必须创建另一个 useEffect 具有仅在这些 useRef 更新时调用 data() 的依赖项？

getTickets()

const getTickets = () => {
            fetch("/api/Ticket")
                .then((response) => response.json())
                .then((data) => {
                    console.log(data)
                    setTickets(data)
                })
                .catch((error) => {
                    console.log(error)
                });
        }

ma​​pTickets()

const mapTickets = () => {
    tickets.map((ticket) => (
        ticket.status == "None" ?
            noneTickets.current.tickets += 1
            : (
                noneTickets.current.tickets = 0
            ),
        ticket.status == "Low" ?
            lowTickets.current.tickets += 1
            : (
                lowTickets.current.tickets = 0
            ),
        ticket.status == "Medium" ?
            mediumTickets.current.tickets += 1
            : (
                mediumTickets.current.tickets = 0
            ),
        ticket.status == "High" ?
            highTickets.current.tickets += 1
            : (
                highTickets.current.tickets = 0
            )
    ))

    
}

数据()

const data = () => {
            setChartData({
                labels: ['None', 'Low', 'Medium', 'High'],
                datasets: [
                    {
                        label: 'ticket priority',
                        data: [noneTickets.current.tickets, lowTickets.current.tickets, mediumTickets.current.tickets, highTickets.current.tick],
                        backgroundColor: [
                            'rgba(75, 192, 192, 0.6)'
                        ],
                        borderWidth: 4
                    }
                ]
            })
        }

useEffect（仅在工单更新时更新 useRefs 和设置图表数据）

useEffect(() => {
    mapTickets();
    data();
}, [tickets])

useEffect（设置工单状态）

useEffect(() => {
    getTickets();
    const requestOptions = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            ApplicationUserusername: location.state.username,
        }),
    };
    fetch("/api/IssueTracker/dashboard", requestOptions)
        .then((response) => response.json())
        .then((data) => {
            setProjects(data);
        })
        .catch((error) => {
            console.log(error)
        });
    
           
}, [])

Answer 1

1. 需要重新渲染更改
2. 在foreach 中不要将其他值更改为0

function App() {
  const [tickets, setTickets] = React.useState([]);
  const [notifyChange, setNotifyChange] = React.useState(false);
  const noneTickets = React.useRef({ tickets: 0 });
  const lowTickets = React.useRef({ tickets: 0 });
  const mediumTickets = React.useRef({ tickets: 0 });
  const highTickets = React.useRef({ tickets: 0 });

  React.useEffect(() => {
    setTickets([
      { status: "None" },
      { status: "None" },
      { status: "Low" },
      { status: "None" },
      { status: "Low" },
      { status: "Medium" },
      { status: "None" },
      { status: "Medium" },
      { status: "Medium" },
      { status: "High" },
      { status: "High" },
      { status: "High" },
      { status: "High" },
    ]);
  }, []);

  const mapTickets = () => {
    tickets.forEach((ticket) => {
      switch (ticket.status) {
        case "None":
          noneTickets.current.tickets += 1;
          break;
        case "Low":
          lowTickets.current.tickets += 1;
          break;
        case "Medium":
          mediumTickets.current.tickets += 1;
          break;
        case "High":
          highTickets.current.tickets += 1;
          break;
      }
    });
    // Here is the trick to re render the changes 
    setNotifyChange(!notifyChange)
  };
  
  React.useEffect(() => {
    mapTickets();
  }, [tickets]);
  
  return (
    <ul>
      <li>None: {noneTickets.current.tickets}</li>
      <li>Low: {lowTickets.current.tickets}</li>
      <li>Medium: {mediumTickets.current.tickets}</li>
      <li>High: {highTickets.current.tickets}</li>
    </ul>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>