當狀態值傳遞給子組件時，ts2322時代就出來了。我如何解決它？
傳遞函式時不是問題，但傳遞狀態時卻是問題。
import React, { useEffect, useState } from "react";
import DashboardUI from "./DashboardMain.presenter";
import axios from "axios";
const DashboardContainer = () => {
const request = "http://localhost:4000/requests";
// interface Iprops {
// id: number;
// title: string;
// client: string;
// due: string;
// count: number;
// amount: number;
// method: string[];
// material: string[];
// status: string;
// }
const [renderData, setRenderData] = useState();
useEffect(() => {
async function getData() {
const response: any = await axios.get(request);
console.log(response);
setRenderData(response.data);
console.log(renderData);
}
getData();
}, []);
return <DashboardUI renderData={renderData} />;
};
這方面有問題。
uj5u.com熱心網友回復：
這是一個問題，因為狀態最初初始化為 undefined
似乎 TypeScript 會檢查錯誤，因為在資料獲取完成之前狀態有一個未定義的值。
- 選中 renderData 進行渲染
import React, { useEffect, useState } from "react";
import DashboardUI from "./DashboardMain.presenter";
import axios from "axios";
const DashboardContainer = () => {
const request = "http://localhost:4000/requests";
// interface Iprops {
// id: number;
// title: string;
// client: string;
// due: string;
// count: number;
// amount: number;
// method: string[];
// material: string[];
// status: string;
// }
const [renderData, setRenderData] = useState(null);
useEffect(() => {
async function getData() {
const response: any = await axios.get(request);
console.log(response);
setRenderData(response.data);
console.log(renderData);
}
getData();
}, []);
if(!renderData) return null
return <DashboardUI renderData={renderData} />;
};
- 使用向下鑄造
import React, { useEffect, useState } from "react";
import DashboardUI from "./DashboardMain.presenter";
import axios from "axios";
const DashboardContainer = () => {
const request = "http://localhost:4000/requests";
// interface Iprops {
// id: number;
// title: string;
// client: string;
// due: string;
// count: number;
// amount: number;
// method: string[];
// material: string[];
// status: string;
// }
const [renderData, setRenderData] = useState(null);
useEffect(() => {
async function getData() {
const response: any = await axios.get(request);
console.log(response);
setRenderData(response.data);
console.log(renderData);
}
getData();
}, []);
return <DashboardUI renderData={renderData as Iprops} />;
};
祝你好運！
uj5u.com熱心網友回復：
如果您的組件是功能組件，那么您可以將 Type 傳遞給它，如下所示：
const YourComponent: React.FC<React.HTMLProps<Element>> = (props => {---your component code---})
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/383508.html