Table 导致重新渲染太多，React

Question

我试图让这个 table 填充到我的检查页面上——但我收到一个错误，指出重新呈现太多，我尝试将该组件移动到另一个组件。我从中删除了 useEffect，但我仍然收到该错误。我知道它肯定在我的 InspectionSearch 中，一旦我渲染它，它就会抛出错误。任何帮助将不胜感激。

import { useState, React } from "react";
import { useTable } from 'react-table'
import 'bootstrap/dist/css/bootstrap.min.css';


const SearchInspections = ({inspections}) => {

    const [chartData, setChartData] = useState([]);

   
        let inspectionData = inspections.map(inspection => {
            return [
                inspection.inspection_date,
                inspection.eggs,
                inspection.larvae,
                inspection.sealed_brood,
                inspection.covered_bees,
                inspection.nectar_honey,
                inspection.pollen,
            ]
        });
        setChartData(inspectionData);
  

    const columns = [
        {
            Header: 'Frames',
            columns: [
                {
                    Header: 'W/Eggs',
                    accessor: 'eggs',
                },
                {
                    Header: 'W/Larvae',
                    accessor: 'larvae',
                },
                {
                    Header: 'W/Sealed Brood',
                    accessor: 'sealed_brood',
                },
                {
                    Header: 'Covered in Bees',
                    accessor: 'covered_bees',
                },
                {
                    Header: 'W/Nectar and/or Honey',
                    accessor: 'nectar_honey',
                },
                {
                    Header: 'W/Pollen',
                    accessor: 'pollen',
                },
                {
                    Header: 'Pest Spotted',
                    accessor: 'pest_spotted',
                },
                {
                    Header: 'Pest Action',
                    accessor: 'pest_action',
                },
                {
                    Header: 'Notes or Concerns',
                    accessor: 'notes_concerns',
                },
                {
                    Header: 'Inspection Date',
                    accessor: 'inspection_date',
                },
            ],
        },
       
    ];


    const data = [
        ...chartData
    ]
    
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable({
        columns,
        data,
    })
    
    return (<>
                    <table className="table" {...getTableProps()}>
            <thead>
                {headerGroups.map(headerGroup => (
                    <tr {...headerGroup.getHeaderGroupProps()}>
                        {headerGroup.headers.map(column => (
                            <th {...column.getHeaderProps()}>{column.render('Header')}</th>
                        ))}
                    </tr>
                ))}
            </thead>
            <tbody {...getTableBodyProps()}>
                {rows.map((row, i) => {
                    prepareRow(row)
                    return (
                        <tr {...row.getRowProps()}>
                            {row.cells.map(cell => {
                                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                            })}
                        </tr>
                    )
                })}
            </tbody>
        </table>
    

    </>);
}

export default SearchInspections;

这是渲染的地方

import { React, useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";
import useAuth from "../../hooks/useAuth";
import DisplayInspections from "../../components/DisplayInspections/DisplayInspections";
import InspectionTracker from "../../components/InspectionTracker/InspectionTracker";
import SearchInspections from "../../components/InspectionSearch/InspectionSearch"

const InspectionPage = (props) => {
  const [user, token] = useAuth();
  const [inspections, setInspections] = useState([]);
  const { id } = useParams();

  useEffect(() => {
    fetchInspections();
  }, [token]);

  const fetchInspections = async () => {
    try {
      let response = await axios.get(
        `http://127.0.0.1:8000/api/inspections/all/${id}`,
        {
          headers: {
            Authorization: "Bearer " + token,
          },
        }
      );
      setInspections(response.data);
    } catch (error) {
      console.log(error.response.data);
    }
  };



  return (
    <div className="container">
      <InspectionTracker inspections={inspections} />
      <DisplayInspections
        inspections={inspections}
        setSelectedHive={props.setSelectedHive}
        setSelectedInspection={props.setSelectedInspection}
      />
      <SearchInspections inspections={inspections} />
    </div>
  );
};

export default InspectionPage;

Answer 1

将您的逻辑放在更新 useEffect 中

const SearchInspections = ({inspections}) => {

   const [chartData, setChartData] = useState([]);

   useEffect(() => {
    let inspectionData = inspections.map(inspection => {
        return [
            inspection.inspection_date,
            inspection.eggs,
            inspection.larvae,
            inspection.sealed_brood,
            inspection.covered_bees,
            inspection.nectar_honey,
            inspection.pollen,
        ]
    });
    setChartData(inspectionData);
  }, [inspections])

   const columns = [
   /** end of your code */

Answer 2

我找到了一位教练来帮助我。数据格式 return 作为数组，它应该被格式化为 table 查看更新和工作代码，以防有人想尝试使用 react-tables!

import { useEffect, useState } from "react";
import React from "react";
import { useTable } from "react-table";

import "bootstrap/dist/css/bootstrap.min.css";



const SearchInspections = ({ inspections }) => {
  const [chartData, setChartData] = useState([]);
  
  useEffect(() => {
    const inspectionData = inspections.map((inspection) => {
      
        return{
            "eggs": inspection.eggs,
            "larvae": inspection.larvae,
            "sealed_brood": inspection.sealed_brood,
            "covered_bees": inspection.covered_bees,
            "nectar_honey": inspection.nectar_honey,
            "pollen": inspection.pollen,
            "pest_spotted": inspection.pest_spotted,
            "pest_action": inspection.pest_action,
            "notes_concerns": inspection.notes_concerns,
            "inspection_date": inspection.inspection_date,
    
        }
      
      ;
    });
    setChartData(inspectionData);
  }, [inspections]);

  const columns = React.useMemo(
      () =>[
    {
      Header: "Frames",
      columns: [
        {
          Header: "W/Eggs",
          accessor: "eggs",
        },
        {
          Header: "W/Larvae",
          accessor: "larvae",
        },
        {
          Header: "W/Sealed Brood",
          accessor: "sealed_brood",
        },
        {
          Header: "Covered in Bees",
          accessor: "covered_bees",
        },
        {
          Header: "W/Nectar and/or Honey",
          accessor: "nectar_honey",
        },
        {
          Header: "W/Pollen",
          accessor: "pollen",
        },
        {
          Header: "Pest Spotted",
          accessor: "pest_spotted",
        },
        {
          Header: "Pest Action",
          accessor: "pest_action",
        },
        {
          Header: "Notes or Concerns",
          accessor: "notes_concerns",
        },
        {
          Header: "Inspection Date",
          accessor: "inspection_date",
        },
      ],
    },
  ], []);

  const data = React.useMemo(() => {
    return  [...chartData]
    }, [chartData]);



    const Table = ({ columns, data }) => {
        // Use the state and functions returned from useTable to build your UI
        const {
          getTableProps,
          getTableBodyProps,
          headerGroups,
          rows,
          prepareRow,
        } = useTable({
          columns,
          data,
        })


        return(
            
            <table className="table" {...getTableProps()}>
            <thead>
              {headerGroups.map((headerGroup) => (
                <tr {...headerGroup.getHeaderGroupProps()}>
                  {headerGroup.headers.map((column) => (
                    <th {...column.getHeaderProps()}>{column.render("Header")}</th>
                  ))}
                </tr>
              ))}
            </thead>
            <tbody {...getTableBodyProps()}>
              {rows.map((row) => {
                prepareRow(row);
                return (
                  <tr {...row.getRowProps()}>
                    {row.cells.map((cell) => {
                      return (
                        <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                      );
                    })}
                  </tr>
                );
              })}
            </tbody>
          </table>

        )
    }


  return (
    <>
    <Table columns={columns} data={data}></Table>
    {console.log(columns)}
    {console.log(data)}
    </>
  );
};





export default SearchInspections;```

Table 导致重新渲染太多，React

Table causing too many re-renders, React

reactjs