如何将数组作为道具传递并在 typescript 反应钩子中的子组件中渲染

Question

I have difficulty passing an array as a prop to a component from the parent and rendering the same in react typescript.

Here is the parent component where the array is been passed.

import ReportComponent from '../Components/Reports/ReportComponent';
import { ReportData } from "../Types/ReportData.types";
const Report = () => {
 const [Report, setReport] = useState<ReportData[]>([]);
 ReportService.GetReport()
      .then((response) => {
        console.log(response.data.data);
        setReport(response.data.data);
        toast.success(response.data.message);
      }).catch((e) => {
        console.log(e);
      });

  return <ReportComponent report {...Report}/>;

But I discovered that the array is not getting to the child and I am getting is TypeError: Report.map is not a function

import { ReportData } from "../../Types/Report.types";
const ReportComponent = (props:ReportData) => {
console.log("props",props)
const [Report, setReport] = useState<ReportData[]>([]);
setReport(props)
return  <div className="row">
         <div className="table-responsive">
      { Report.map((report)=>(  
      <table className="table table-striped table-sm">
        <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">UID</th>
            <th scope="col">Value</th>
            <th scope="col">Length</th>
          </tr>
        </thead>    
          <tbody className="table table-striped table-sm">
            <tr>
              <td>{report.name}</td>
              <td>{report.UID}</td>
              <td>{report.Value}</td>
              <td>{report.Length}</td>
             </tr>
          </tbody>
      </table>
       ))}
    </div>
        </div>
} 

Answer 1

TL;DR:

const Report = () => {
    const [report, setReport] = useState<ReportData[]>([]);

    useEffect(() => {
        ReportService.GetReport()
            .then((response) => {
                console.log(response.data.data);
                setReport(response.data.data);
                toast.success(response.data.message);
            }).catch((e) => {
                console.log(e);
            });
    }, []);

    return <ReportComponent reports={report} />;
);

interface ReportComponentProps {
    reports: ReportData[];
}

const ReportComponent = ({
    reports,
}: ReportData) => {
    return (
        <div className="row">
            <div className="table-responsive">
                {reports.map((report) => (
                    <table className="table table-striped table-sm">
                        <thead>
                            <tr>
                                <th scope="col">Name</th>
                                <th scope="col">UID</th>
                                <th scope="col">Value</th>
                                <th scope="col">Length</th>
                            </tr>
                        </thead>
                        <tbody className="table table-striped table-sm">
                            <tr>
                                <td>{report.name}</td>
                                <td>{report.UID}</td>
                                <td>{report.Value}</td>
                                <td>{report.Length}</td>
                            </tr>
                        </tbody>
                    </table>
                ))}
            </div>
        </div>
    );
}

1. You should not do things as fetching data ( ReportService.GetReport()... ) inside the render of a component. If you do, every time a component re-renders, that code is executed again, meaning a new fetch will happen.
2. Passing props is done like <YourComponent propA={propValue} />
3. Your props do not have the type of ReportData ( const ReportComponent = (props:ReportData) => { . props is an object with attributes with the names of the actual props.
4. You should not do setState inside the render. Just like the fetch, every time the component re-renders, that code is executed again. Because a setState causes a re-render, that means that the "render code" is executed again, so another setState is executed, that causes another re-render, and so on.
5. If you recive props by properties , you do not need (and should not) do a setState(props) . It is not only redundant, but also causes performance losses.

There are a few other issues with your code. I encourage you to go through the baiscs of react again.