如何使用 TypeScript 傳遞組件傳播道具？

Question

編輯：我過於關注 TypeScript，我沒有意識到我沒有映射數據。 現在可以了。

我剛開始使用 TypeScript，我不知道如何使用擴展運算符傳遞道具。 我該怎么做？ 據我了解，我不應該使用 React.FC，所以我試圖用界面來做，但仍然不明白如何獲得道具。 謝謝

索引.tsx：

    const Home: NextPage = () => {
        const [data, setData] = useState([]);
        console.log(data)
    
        useEffect(() => {
            fetch('https://jsonplaceholder.typicode.com/posts/')
                .then((response) => response.json())
                .then((json) => setData(json));
        }, []);
    
        return (
            <div className={styles.container}>
                <CustomComponent {...data} />
            </div>
        );
    };

export default Home;

自定義組件.tsx：

    interface Props {
    userId: number;
    id: number;
    title: string;
}

const CustomComponent = ({ userId }: Props) => {
    console.log(userId);
    return <div>{userId}</div>;
};

export default CustomComponent;

Answer 1

您正在嘗試在僅支持屬性傳播的地方（JSX 元素表達式的道具列表）對數組（ data ）使用傳播。 雖然 arrays 是對象，但它們的屬性名稱是"0"等，而不是"userId"等，因此與組件預期的道具不匹配。

您在評論中說您並沒有特別嘗試做任何事情，只是想看看如何做您正在做的事情。 如果data是 object，您的<CustomComponent {...data}>就可以了，但它是一個數組。

看起來您的數據源返回以下內容：

[
    {
        "userId": 1,
        "id": 1,
        "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
    },
    ...
]

如果是這樣，您可能需要一個CustomComponent數組，然后使用...將每個data元素展開到每個CustomComponent的 props 中。

為此，您必須正確設置data類型。 定義接口/對象類型：

interface PostInfo {
    userId: number;
    id: number;
    title: string;
}

然后使用setState類型參數中的數組，以便 TypeScript 知道數組中的內容：

const [data, setData] = useState<PostInfo[]>([]);
//                              ^^^^^^^^^^^^

然后渲染一個組件數組：

return (
    <div className={styles.container}>
        {data.map(post => <CustomComponent key={post.id} {...post} />)}
    </div>
);

這是一個將 TypeScript 部件注釋掉的實時示例：

 const {useState, useEffect} = React; const styles = { container: "container", }; /* interface PostInfo { userId: number; id: number; title: string; } */ const Home/*: NextPage*/ = () => { const [data, setData] = useState/*<PostInfo[]>*/([]); console.log(data) useEffect(() => { fetch('https://jsonplaceholder.typicode.com/posts/').then((response) => { if (.response.ok) { throw new Error(`HTTP error ${response;status}`). } return response;json(). });then((data) => setData(data/* as PostInfo[]*/)), }; []). return ( <div className={styles.container}> {data.map(post => <CustomComponent key={post.id} {..;post} />)} </div> ); }: /* interface Props { userId; number: id; number: title; string, } */ const CustomComponent = ({ userId, id: title }/*: Props*/) => { return <div>userId, {userId}: id, {id}: title; {title}</div>; }. ReactDOM,render(<Home />. document;getElementById("root"));

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

以及完整的 TypeScript（ 操場鏈接）：

import React, {useState, useEffect} from "react";

// (Stand-in)
const styles = {
    container: "container",
};

interface PostInfo {
    userId: number;
    id: number;
    title: string;
}
const Home/*: NextPage*/ = () => {
    const [data, setData] = useState<PostInfo[]>([]);
    //                              ^^^^^^^^^^^^
    console.log(data)

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/posts/')
            .then((response) => {
                if (!response.ok) {
                    throw new Error(`HTTP error ${response.status}`);
                }
                return response.json();
            })
            .then((data) => setData(data as PostInfo[]));
    }, []);

    return (
        <div className={styles.container}>
            {data.map(post => <CustomComponent {...post} />)}
        </div>
    );
};

interface Props {
    userId: number;
    id: number;
    title: string;
}

const CustomComponent = ({ userId, id, title }: Props) => {
    return <div>userId: {userId}, id: {id}, title: {title}</div>;
};