輸入評論后出現關鍵錯誤。 我不知道如何解決（反應問題）

Question

輸入評論后出現關鍵錯誤。 但我找不到原因。

問題：評論后屏幕閃爍 我收到一個關鍵錯誤，但無法確定關鍵錯誤在哪里。

以下是我嘗試修復關鍵錯誤的方法：

key = {c} => key = {c.id}

是什么導致密鑰錯誤？

錯誤信息是這樣的：

VM152 _app.js:22355 Uncaught TypeError: Cannot read property 'key' of undefined
    at List._this.renderItem (VM152 _app.js:22355)
    at VM152 _app.js:22465
    at Array.map (<anonymous>)
    at List._this.renderList (VM152 _app.js:22464)
    ...

代碼是這個

const Home = () => {
    const dispatch = useDispatch();
    const { isLoggedIn, me } = useSelector(state => state.user);
    const { mainPosts } = useSelector(state => state.post);

    useEffect(() => {
        // alert("LOAD_MAIN_POSTS_REQUEST 실행")
        dispatch({
            type: LOAD_MAIN_POSTS_REQUEST,
        })
    }, []);

    return (
        <>
            {me && <PostForm />}
            {mainPosts.map((c) => {
                return (
                    <PostCard key={c.id} post={c} />
                );
            })}
        </>
    );
};

Answer 1

Home 組件第一次渲染 mainPosts 數組時可能沒有任何數據，在調用 useEffect 並調度您的操作后，數據將呈現。 要考慮初始渲染中不存在的數據，您可以驗證 mainPosts 以檢查 null 或未定義。 這樣，.map 只會在 mainPosts 為真時發生。