输入评论后出现关键错误。 我不知道如何解决（反应问题）

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 为真时发生。