嵌套组件不会接收由父组件传递的类型。

huangapple
go评论92阅读模式
英文:

Nested component wont receive types passed down by parent

问题

以下是您要的代码部分的翻译：

  1. // 我试图组装一个表格，它将通过后端解决的操作进行更新，因此我需要能够传递端点和响应模型，当我尝试嵌套并传递响应类型时，它在子组件中不知何故丢失了。
  3. // 简要示意图：TableParent.ResT -> TableChild ProviderForUpdates DataHandler.ResT // 需要这个来知道如何处理数据 ProviderForUpdates / TableChild
  5. // 想要的情景：父组件将传递响应类型 - DataHandlerChild 将继承它并进行查询以更新表格 - 子组件将相应更新
  7. import { useState } from "react";
  8. import DataTable from "@components/dataTable";
  10. type CarTypes = { id: number; name: string; description: string; };
  12. interface ResponseType {
  13.   id: number;
  14.   carTypes: CarTypes[];
  15. }
  17. const CarTypeComponent = () => {
  18.   const [carTypes, setCarTypes] = useState<ResponseType[]>([]);
  19.   
  20.   return (
  21.     <>
  22.       <DataTable<ResponseType>
  23.         endpoint="car_types"
  24.         setIdsSelected={(ids: number[]) => setIdsSelected(ids)}
  25.         idsSelected={idsSelected}
  26.         onRowClick={handleRowClick}
  27.       />
  28.     </>
  29.   );
  30. };
  32. const DataTable = <ResponseType>({
  33.   setIdsSelected,
  34.   idsSelected,
  35.   onRowClick,
  36.   endpoint,
  37.   onSort = (column: string, dir: "asc" | "desc" | "") => {},
  38. }: Props) => {
  39.   return (
  40.     <>
  41.       <TableContentProvider>
  42.         {/* 由于我不知道的原因，类型在这里不会出现 */}
  43.         <TableDataHandler<ResponseType>
  44.           setIdsSelected={setIdsSelected}
  45.           idsSelected={idsSelected}
  46.           onSort={onSort}
  47.           onRowClick={(id: number) => {
  48.             onRowClick(id);
  49.           }}
  50.           endpoint={endpoint}
  51.         />
  52.       </TableContentProvider>
  53.     </>
  54.   );
  55. };
  57. const TableDataHandler = <ResponseType>({
  58.   setIdsSelected,
  59.   idsSelected,
  60.   onSort,
  61.   onRowClick,
  62.   endpoint,
  63. }: TableDataHandlerProps<ResponseType>) => {
  64.   const { currentSortedColumn, queryString } = useTableContext();
  65.   const { response, error, loading } = useAxios<ResponseType>({
  66.     url: `${endpoint}?${queryString}`,
  67.     method: Methods.GET,
  68.   });
  69.   
  70.   return (
  71.     <>
  72.       {response && <TableCore<typeof tableData.data />}
  73.     </>
  74.   );
  75. };

请注意，这个代码可能需要根据您的项目和库的实际情况进行调整，以确保一切正常运作。

英文:

I am trying to assemble a table that will be updated through actions resolved by backend, so for this reason I need to be able to pass the endpoint and the response model , when I try to nest and pass the response type it somehow gets lost in children components.

brief schematic TableParent.ResT -> TableChild ProviderForUpdates DataHandler.ResT\ // needs this to know under how to deal with the data ProviderForUpdates/ TableChild

Wanted scenario ParentComponent -will pass down the Type of Response - DataHandlerChild will inherit it and make the queries to update table - Children will update accordingly

Thanks for your help in advance

  1. import { useState } from &quot;react&quot;; import DataTable from 
  2. &quot;@components/dataTable&quot;; type CarTypes = { id: number; name: string; description: string; }; interface ResponseType { id: number; carTypes: CarTypes[]; }
  3. const CarTypeComponent = () = &gt;{
  4. const[carTypes, setCarTypes] = useState &lt; ResponseType[] &gt; ([]);
  5. return ( &lt; &gt;&lt;DataTable &lt; ResponseType &gt; endpoint = &quot;car_types&quot;setIdsSelected = { (ids: number[]) = &gt;setIdsSelected(ids)
  6. }
  7. idsSelected = {
  8. idsSelected
  9. }
  10. onRowClick = {
  11. handleRowClick
  12. }
  13. /&gt;
  14. &lt;/ &gt; );
  15. };
  16. const DataTable = &lt;ResponseType,
  17. &gt;({
  18. setIdsSelected,
  19. idsSelected,
  20. onRowClick,
  21. endpoint,
  22. // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function, react/prop-types
  23. onSort = (column: string, dir: &quot;asc&quot; | &quot;desc&quot; | &quot;&quot;) = &gt;{},
  24. }: Props) = &gt;{
  25. return (&lt; &gt;{
  26. } &lt; TableContentProvider &gt; {
  27. /* for reasons beyond my knowledge type doesnt arrives here */
  28. } &lt; TableDataHandler &lt; ResponseType &gt; setIdsSelected = {
  29. setIdsSelected
  30. }
  31. idsSelected = {
  32. idsSelected
  33. }
  34. onSort = {
  35. onSort
  36. }
  37. onRowClick = { (id: number) = &gt;{
  38. onRowClick(id);
  39. }
  40. }
  41. endpoint = {
  42. endpoint
  43. }
  44. /&gt;
  45. &lt;/TableContentProvider &gt; &lt;/&gt;
  46. );
  47. };
  48. const TableDataHandler = &lt;ResponseType,&gt;({
  49. setIdsSelected,
  50. idsSelected,
  51. onSort,
  52. onRowClick,
  53. endpoint,
  54. }: TableDataHandlerProps&lt;ResponseType&gt;) =&gt; {
  55. const { currentSortedColumn, queryString } = useTableContext();
  56. const {
  57. response,
  58. error,
  59. loading
  60. } = useAxios &lt; ResponseType &gt; ({
  61. url: `$ {
  62. endpoint
  63. }
  64. s ? $ {
  65. queryString
  66. }`,
  67. method: Methods.GET,
  68. });
  69. return ( &lt; &gt;{
  70. response &amp;&amp; &lt;TableCore &lt; typeof tableData.data &gt; /&gt;
  71. }
  72. &lt;/ &gt; );
  73. };

答案1

得分: 1

你不能这样传递属性，尝试使用更简单的方法。

  1. function CarTypeComponent({ ids }: { ids: number[] }) {
  2.   const [carTypes, setCarTypes] = useState([]);
  3.   const [idsSelected, setIdsSelected] = useState<number[]>([]);
  5.   const handleIdSelected = () => {
  6.     setIdsSelected(ids);
  7.   };
  9.   return (
  10.     <DataTable setIdsSelected={handleIdSelected} endpoint="/api/carTypes" />
  11.   );
  12. }
英文:

you can not pass props like that try something simpler

  1. function CarTypeComponent({ ids }: { ids: number[] }) {
  2. const [carTypes, setCarTypes] = useState([]);
  3. const [idsSelected, setIdsSelected] = useState&lt;number[]&gt;([]);
  4. const handleIdSelected = () =&gt; {
  5. setIdsSelected(ids);
  6. };
  7. return (
  8. &lt;DataTable setIdsSelected={handleIdSelected} endpoint=&quot;/api/carTypes&quot; /&gt;
  9. );
  10. }

huangapple
  • 本文由 发表于 2023年3月7日 22:03:36
  • 转载请务必保留本文链接：https://go.coder-hub.com/75662994.html
  • nested
  • reactjs
  • types
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定