組件不會在 useEffect() 運行一次時呈現

Question

所以我有以下代碼，我在其中獲取要在我的組件中呈現的數據。 但是，如果將 useEffect 設置為運行一次，它不會在組件內部渲染數據，並且一直運行它是不可持續的。

 import React, { useState, useEffect } from "react"; import Chart from "react-google-charts"; const Bottom5 = ({ company }) => { const [quiz, setQuiz] = useState(''); const [dataPoints, setDatapoints] = useState([]); useEffect(() => { var resultData = []; fetch(`http://localhost:3001/company/dashboard/bottom5/${company}`).then(function(response) { return response.json(); }).then(function(data) { for (var i = 0; i < data.length; i++) { resultData.push({ label: data[i].name, y: data[i].sumCorrect }); } setDatapoints(resultData) }); },[]) return ( <Chart style={{display:"inline-block"}} width={'500px'} height={'300px'} chartType="ColumnChart" loader={<div>Loading Chart</div>} data={[ ['Names', 'Result'], ...dataPoints.map(d => [d.label, dy]) ]} options={{ title: 'CyberSecurity Bottom 5', chartArea: { width: '50%' }, hAxis: { title: 'Employees', minValue: 0, }, vAxis: { title: 'Total Correct', }, }} // For tests rootProps={{ 'data-testid': '1' }} /> ) } export default Bottom5;

Answer 1

會不會是當您第一次安裝組件時，您沒有將company傳遞給它？

通常，由於代碼依賴於company的值，因此最好將company添加到useEffect依賴項列表中。

useEffect(() => {
  var resultData = [];
  if (company) {
    fetch(`http://localhost:3001/company/dashboard/bottom5/${company}`)
      .then(function(response) {
        return response.json();
      })
      .then(function(data) {
        for (var i = 0; i < data.length; i++) {
          resultData.push({
            label: data[i].name,
            y: data[i].sumCorrect
          });
        }
        setDatapoints(resultData)
      });
  }
}, [company])

這樣，只有在company屬性更改時才會調用它。

Answer 2

使用鈎子更新數組存在問題。

setDatapoints(resultData) // reference is same - not updating
setDatapoints([...resultData]) // do this << --

數組的引用不會改變，所以鈎子不會自我更新。