javascript - 输入评论后出现关键错误。我不知道如何解决( react 问题)

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 并分派(dispatch)您的操作后，数据将出现。为了解释初始渲染时不存在的数据，您可以验证 mainPosts 以检查是否为 null 或未定义。这样，.map 只会在 mainPosts 为 true 时发生。