当 useEffect() 为运行盎司时组件不会呈现

Question

所以我有以下代码，我在其中获取要在我的组件中呈现的数据。但是，如果将 useEffect 设置为运行一次，它将不会在组件内部渲染数据，并且持续运行ning 是不可持续的。

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, d.y])
                ]}
                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

使用挂钩更新数组时出现问题。

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

数组的引用不会改变，因此挂钩不会自行更新。

Answer 2

会不会是你第一次挂载组件的时候没有给它传递一个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 属性改变时被调用。

当 useEffect() 为运行盎司时组件不会呈现

component wont render when is useEffect() is ran once

javascript

reactjs

react-hooks

react-google-charts

当 useEffect() 为 运行 盎司时组件不会呈现

component wont render when is useEffect() is ran once

javascript

reactjs

react-hooks

react-google-charts

当 useEffect() 为运行盎司时组件不会呈现