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

Question

我正在一个错误跟踪器项目中构建一个网页，用户可以在登录后在图表中查看某些类型的票证。我通过在函数 getTickets() 中进行 api 调用来检索这些票证。 ，并将它们设置为状态。我有一个 useEffect，它包含一个映射票证的函数，并将每种类型的票证数量保存在 useRef vars 中。然后将这些变量设置为 data()它设置图表的数据。
我将如何更新这些 useRefs？当我记录这些 useRefs 时，它们都是空的。此外，由于 setChartData()是异步的，我是否必须使用仅调用 data() 的依赖项创建另一个 useEffect这些 useRef 什么时候更新？
getTickets()

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

mapTickets()

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
                    }
                ]
            })
        }

使用效果 (如果票证更新，仅更新 useRefs 和设置图表数据)

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

使用效果 (在状态设置门票)

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

更改需要重新渲染

在 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>