英文:
Nested component wont receive types passed down by parent
问题
以下是您要的代码部分的翻译：
// 我试图组装一个表格，它将通过后端解决的操作进行更新，因此我需要能够传递端点和响应模型，当我尝试嵌套并传递响应类型时，它在子组件中不知何故丢失了。
// 简要示意图：TableParent.ResT -> TableChild ProviderForUpdates DataHandler.ResT // 需要这个来知道如何处理数据 ProviderForUpdates / TableChild
// 想要的情景：父组件将传递响应类型 - DataHandlerChild 将继承它并进行查询以更新表格 - 子组件将相应更新
import { useState } from "react";
import DataTable from "@components/dataTable";
type CarTypes = { id: number; name: string; description: string; };
interface ResponseType {
id: number;
carTypes: CarTypes[];
}
const CarTypeComponent = () => {
const [carTypes, setCarTypes] = useState<ResponseType[]>([]);
return (
<>
<DataTable<ResponseType>
endpoint="car_types"
setIdsSelected={(ids: number[]) => setIdsSelected(ids)}
idsSelected={idsSelected}
onRowClick={handleRowClick}
/>
</>
);
};
const DataTable = <ResponseType>({
setIdsSelected,
idsSelected,
onRowClick,
endpoint,
onSort = (column: string, dir: "asc" | "desc" | "") => {},
}: Props) => {
return (
<>
<TableContentProvider>
{/* 由于我不知道的原因，类型在这里不会出现 */}
<TableDataHandler<ResponseType>
setIdsSelected={setIdsSelected}
idsSelected={idsSelected}
onSort={onSort}
onRowClick={(id: number) => {
onRowClick(id);
}}
endpoint={endpoint}
/>
</TableContentProvider>
</>
);
};
const TableDataHandler = <ResponseType>({
setIdsSelected,
idsSelected,
onSort,
onRowClick,
endpoint,
}: TableDataHandlerProps<ResponseType>) => {
const { currentSortedColumn, queryString } = useTableContext();
const { response, error, loading } = useAxios<ResponseType>({
url: `${endpoint}?${queryString}`,
method: Methods.GET,
});
return (
<>
{response && <TableCore<typeof tableData.data />}
</>
);
};
请注意，这个代码可能需要根据您的项目和库的实际情况进行调整，以确保一切正常运作。
英文:
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
import { useState } from "react"; import DataTable from
"@components/dataTable"; type CarTypes = { id: number; name: string; description: string; }; interface ResponseType { id: number; carTypes: CarTypes[]; }
const CarTypeComponent = () = >{
const[carTypes, setCarTypes] = useState < ResponseType[] > ([]);
return ( < ><DataTable < ResponseType > endpoint = "car_types"setIdsSelected = { (ids: number[]) = >setIdsSelected(ids)
}
idsSelected = {
idsSelected
}
onRowClick = {
handleRowClick
}
/>
</ > );
};
const DataTable = <ResponseType,
>({
setIdsSelected,
idsSelected,
onRowClick,
endpoint,
// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function, react/prop-types
onSort = (column: string, dir: "asc" | "desc" | "") = >{},
}: Props) = >{
return (< >{
} < TableContentProvider > {
/* for reasons beyond my knowledge type doesnt arrives here */
} < TableDataHandler < ResponseType > setIdsSelected = {
setIdsSelected
}
idsSelected = {
idsSelected
}
onSort = {
onSort
}
onRowClick = { (id: number) = >{
onRowClick(id);
}
}
endpoint = {
endpoint
}
/>
</TableContentProvider > </>
);
};
const TableDataHandler = <ResponseType,>({
setIdsSelected,
idsSelected,
onSort,
onRowClick,
endpoint,
}: TableDataHandlerProps<ResponseType>) => {
const { currentSortedColumn, queryString } = useTableContext();
const {
response,
error,
loading
} = useAxios < ResponseType > ({
url: `$ {
endpoint
}
s ? $ {
queryString
}`,
method: Methods.GET,
});
return ( < >{
response && <TableCore < typeof tableData.data > />
}
</ > );
};
答案1
得分: 1
你不能这样传递属性，尝试使用更简单的方法。
function CarTypeComponent({ ids }: { ids: number[] }) {
const [carTypes, setCarTypes] = useState([]);
const [idsSelected, setIdsSelected] = useState<number[]>([]);
const handleIdSelected = () => {
setIdsSelected(ids);
};
return (
<DataTable setIdsSelected={handleIdSelected} endpoint="/api/carTypes" />
);
}
英文:
you can not pass props like that try something simpler
function CarTypeComponent({ ids }: { ids: number[] }) {
const [carTypes, setCarTypes] = useState([]);
const [idsSelected, setIdsSelected] = useState<number[]>([]);
const handleIdSelected = () => {
setIdsSelected(ids);
};
return (
<DataTable setIdsSelected={handleIdSelected} endpoint="/api/carTypes" />
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论