在反應中使用 ag-grid

Question

在我的應用程序中有四個選項卡。在每個選項卡中我想顯示不同的數據集。暫時我只定義了 2 個數據集。當我執行如下代碼時，它給出了一個錯誤，說重新渲染太多。我可以'不明白如何在tabPanel函數中分配數據集你能解釋一下分別為每個標簽分配數據集的方法嗎

import React, { useState } from 'react';
import './App.css';
import Paper from '@material-ui/core/Paper';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { AgGridColumn, AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

export default function App() {

  const [value, setValue] = useState(0);
  const [gridApi, setGridApi] = useState(null);
  const [gridColumnApi, setGridColumnApi] = useState(null);


  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Paper square>
      <h1>Current Plans</h1>
      <Tabs value={value} onChange={handleChange} style={{ color: 'black' }}>
        <Tab label="Medical" />
        <Tab label="Dental" />
        <Tab label="Vision" />
        <Tab label="Life and Disability" />
      </Tabs>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
        </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
        </TabPanel>
      <TabPanel value={value} index={3}>
        Item Four
        </TabPanel>
    </Paper>
  )

}


function TabPanel(props) {

  const { children, value, index } = props;
  const [dataSet,setData]  = useState([]);

  

  if(value===0){
    console.log("value",value)
    const dataSet0 = [
      { make: "0", model: "Mondeo", price: 32000 },
      { make: "0", model: "Boxter", price: 72000 }, 
      { make: "0", model: "Celica", price: 35000 },
      { make: "0", model: "Mondeo", price: 32000 },
      { make: "0", model: "Boxter", price: 72000 },
      { make: "0", model: "Celica", price: 35000 },
      { make: "0", model: "Mondeo", price: 32000 },
      { make: "0", model: "Boxter", price: 72000 },
      { make: "0", model: "Celica", price: 35000 },
      
    ]

    setData(dataSet0)

  }
  if(value===1){
    console.log("value",value)
    const dataSet1 = [
      { make: "1", model: "Celica", price: 35000 },
      { make: "2", model: "Mondeo", price: 32000 },
      { make: "3", model: "Boxter", price: 72000 },
      { make: "4", model: "Celica", price: 35000 },
      { make: "5", model: "Mondeo", price: 32000 },
      { make: "6", model: "Boxter", price: 72000 }, 
      { make: "7", model: "Celica", price: 35000 },
      { make: "8", model: "Mondeo", price: 32000 },
      { make: "9", model: "Boxter", price: 72000 }
    ]

    setData(dataSet1)

    
  }
  if(value===2){
    console.log("value",value)
  }
  if(value===3){
    console.log("value",value)
  }


  return (
    <div>
      {
        value === index && (
          <div className="ag-theme-alpine" style={{ height: 400, width: 1200 }}>
            <AgGridReact
              rowData={dataSet}>
              <AgGridColumn field="make"></AgGridColumn>
              <AgGridColumn field="model"></AgGridColumn>
              <AgGridColumn field="price"></AgGridColumn>
              <AgGridColumn field="make"></AgGridColumn>
              <AgGridColumn field="model"></AgGridColumn>
              <AgGridColumn field="price"></AgGridColumn>
              <AgGridColumn field="make"></AgGridColumn>
              <AgGridColumn field="model"></AgGridColumn>
              <AgGridColumn field="price"></AgGridColumn>
            </AgGridReact>
          </div>
        )
      }
    </div>
    
  )
}

Answer 1

我正在使用useEffect

useEffect(() => {
    setValueDataSet();
  },[value]);

  function setValueDataSet() {
    if (value === 0) {
      console.log("value", value);
      const dataSet0 = [
        { make: "0", model: "Mondeo", price: 32000 },
        { make: "0", model: "Boxter", price: 72000 },
        { make: "0", model: "Celica", price: 35000 },
        { make: "0", model: "Mondeo", price: 32000 },
        { make: "0", model: "Boxter", price: 72000 },
        { make: "0", model: "Celica", price: 35000 },
        { make: "0", model: "Mondeo", price: 32000 },
        { make: "0", model: "Boxter", price: 72000 },
        { make: "0", model: "Celica", price: 35000 }
      ];

      setData(dataSet0);
    }
    if (value === 1) {
      console.log("value", value);
      const dataSet1 = [
        { make: "1", model: "Celica", price: 35000 },
        { make: "2", model: "Mondeo", price: 32000 },
        { make: "3", model: "Boxter", price: 72000 },
        { make: "4", model: "Celica", price: 35000 },
        { make: "5", model: "Mondeo", price: 32000 },
        { make: "6", model: "Boxter", price: 72000 },
        { make: "7", model: "Celica", price: 35000 },
        { make: "8", model: "Mondeo", price: 32000 },
        { make: "9", model: "Boxter", price: 72000 }
      ];

      setData(dataSet1);
    }
    if (value === 2) {
      console.log("value", value);
      setData([]);
    }
    if (value === 3) {
      console.log("value", value);
      setData([]);
    }
  }

工作演示