React Hooks：将来自 api 调用的数据映射到渲染饼图

Question

need some help here. Thank you!

I am making a call to an api which returns an object with two numbers and a list, like so...

{2, 1 , []}

The codebase I am working with is using 'use-global-hook' for Redux state management. So I have storeState, storeActions as global hooks.

So in my render I have verified that the number values exist.

return
(
  <h3> storeState.value1</h3>  //prints 2
  <h3> storeState.value2 </h3> //prints 1

)

Tried mapping this way and this throws too many renders error. How can I map the dataset to Pie chart?

const test1 = (props) => 
{

  const [piChartData, setpiChart] = useState({});

  React.useEffect(()=>{
    storeActions.callApi(); 
   },[]);

  function drawPieChart()
  {
    setpiChart({
       labels: ['label1', 'label2'],
       datasets:[{
                   data:[storeState.value1, storeState.value2],
                   backgroundColor: ['red','green']
                 }]
   })
 }

 return(
  {drawPieChart()}

   <Pie data={piChartData}/>
  )
 }

Answer 1

drawPieChart calls setpiChart updating the state and causing the component to re-render, on each render, you call drawPieChart , which calls setpiChart , causing an infinite loop of rendering,

remove drawPieChart() from render and put it in useEffect so it gets called when the component mounts, if callApi is aync and returns a promise , use .then :

const test1 = (props) => {
  const [piChartData, setpiChart] = useState({});

  React.useEffect(() => {
    storeActions.callApi();
    drawPieChart();
    /**
     * OR
     * storeActions.callApi().then(() => drawPieChart(););    
     */
  }, []);

  function drawPieChart() {
    setpiChart({
      labels: ["label1", "label2"],
      datasets: [
        {
          data: [storeState.value1, storeState.value2],
          backgroundColor: ["red", "green"]
        }
      ]
    });
  }

  return <Pie data={piChartData} />;
};