object 的值在 React 中總是顯示“未定義”

Question

我有一個問題，我無法訪問 object 的值，這可能是因為在程序獲取數據並將其放入 object 之前渲染了 DOM。

我正在嘗試實現您可以看到所有用戶的所有評論的頁面。 在頁面中，您還可以查看您已經喜歡或不喜歡的評論。 為了實現它，我想訪問用戶擁有的所有喜歡。

這是 object 的初始 state。

const initialState = {
    likes: {},
};

這個 object 將填充從 api 服務器獲取的數據，如下所示；

likes = {
    1: {id: 38, user_id: 3, review_id: 1, created_at: "2020-04-11T04:12:14.569Z", updated_at: "2020-04-11T04:12:14.569Z"}
    2: {id: 24, user_id: 3, review_id: 2, created_at: "2020-04-11T03:25:16.589Z", updated_at: "2020-04-11T03:25:16.589Z"}
    3: {id: 20, user_id: 3, review_id: 3, created_at: "2020-04-09T12:07:34.669Z", updated_at: "2020-04-09T12:07:34.669Z"}
}

下面是代表評論的一些信息的組件，例如標題，用戶名，點贊數等。這些信息是從帶有“評論”屬性的父組件繼承而來的。

<ReviewCard.js> 
const ReviewCard = props => {
    let { id, user_id, title, image, rate, good, likes_count, gameId, createdAt } = props.review;
    const userId = useSelector(state => state.authReducer.userId);
    .
    .
    .
    let favorite = <LikeButton 
                        likesCount={likes_count}
                        userId={userId} 
                        reviewId={id}
                    />

return (
        <Card className={classes.root}>
            <CardHeader
                .
                .
                .
                action={favorite}
                title={title}
                subheader={createdAt}
            />
    .
    .
    . 
);

LikeButton 組件實際上就是like 按鈕。 我想根據用戶是否已經喜歡評論來更改按鈕的顏色。 但是， if (likes[reviewId])總是被忽略，因為即使在likes object 填充了從 api 獲取的實際數據之后， likes[reviewId]也是undefined的。

<LikeButton.js>
const LikeButton = props => {
    let { likesCount, userId, reviewId } = props;
    const dispatch = useDispatch();
    const likes = useSelector(state => state.likeReducer.likes);

    const [count, setCount] = useState(likesCount);

    useEffect(() => {
        dispatch(actions.fetchLike(likes, userId, reviewId));
    }, [props, likes, count]);

    .
    .
    .

    console.log('likes is ', likes);
    console.log('reviewId is', reviewId);
    console.log(`like with reviewId = ${reviewId} is `, likes[reviewId]);

    let favorite = (
        <div className={classes.LikeButton}>
            <FavoriteBorderIcon 
                onClick={onLikeHandler}
                className={classes.Icon}
            />
            {count}
        </div>
    );

    if (likes[reviewId]) {
        favorite = (
            <div className={classes.LikeButton}>
                <FavoriteIcon 
                    onClick={onUnlikeHandler}
                    className={classes.FavoriteIcon}
                />
                {count}
            </div>
        );
    }

    return (
        <div>
            {favorite}
        </div>
    );
};

下面是 Redux 的類似操作。

<./actions/like.js>
export const setLike = likes => {
    return {
        type: actionTypes.SET_LIKE,
        likes: likes,
    };
};

export const fetchLike = (likes, userId, reviewId) => {
    return dispatch => {
        const url = `http://localhost:3001/users/${userId}/reviews/${reviewId}/likes/1`;
        axios
            .get(url)
            .then(response => {
                likes[reviewId] = response.data; 
                dispatch(setLike(likes));
            })
            .catch(error => {
                console.log(error);
            });
    }
};

下面是Redux的同類減速機。

<./reducer/like.js>
const initialState = {
    likes: {},
};

const setLike = (state, action) => {
    return updateObject(state, {
        likes: action.likes,
    });
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.SET_LIKE:
            return setLike(state, action);
        default:
            return state;
    }
};

一旦 fetchLike 獲取用戶的贊，它將存儲在likes likes: {}中。 實際上， console.log('likes is ', likes); 在 LikeButton.js 中，一旦fetchLike()完成，就會顯示likes的內容。 但是， console.log( like with reviewId = ${reviewId} is , likes[reviewId]); 仍然顯示undefined 。 圖片：console.log() 的結果；

我猜它獲取數據並呈現頁面的時間可能存在一些問題。 （我知道每次第二個參數中的變量發生變化時都會觸發useEffect ......）

如果您能就此提供一些建議，我將不勝感激。

謝謝閱讀：）

Answer 1

其背后的原因是您的axios調用是異步響應的，因此您likes的 state 將稍后更新。 可能您可以使用useEffect()鈎子捕獲更改。

嘗試如下：

useEffect(() => {
   console.log('likes is ', likes);
}, [likes]);

通過這樣做，您的likes將在 state 上發生更改后登錄到控制台。

我希望這有幫助！

Answer 2

使用帶有 if else 語句的加載屏幕。

如果（喜歡）“正在加載...”：不加載等...