dydcodydco0983

<p>다시 코드를 봐보니까, 호출하고 onSuccess에 state를 바꿔주면 컴포넌트를 리로드해주기 때문에 무한으로 호출하고 있는것 같습니다. 혹시 다른 좋은 방법이 있다면 추천해주실 수 있을까요? useSWRInfinite를 쓰는게 좋은방법일지 궁금합니다.</p>

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

<p>혹시나해서</p><p>postcard.js의 전체코드는</p><p>아래와 같습니다.</p><pre><code>import { Card, Popover, Button, Avatar, List } from "antd";
import { RetweetOutlined, HeartOutlined, HeartTwoTone, MessageOutlined, EllipsisOutlined } from "@ant-design/icons";
import { useState, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import PropTypes from "prop-types";
import { removePostRequestAction } from "../reducers/post";

import PostImages from "./PostImages";
import CommentForm from "./CommentForm";
import PostCardContent from "./PostCardContent";
import Followbutton from "./FollowButton";

const PostCard = ({ post }) => {
	// const { me: {id} } = useSelector((state) => state.user);
	// const id = me && me.id;
	// const id = me?.id; // 옵셔널 체이닝 연산자
	const id = useSelector((state) => state.user.me?.id);
	const { removePostLoading } = useSelector((state) => state.post);
	const dispatch = useDispatch();
	const [liked, setLiked] = useState(false);
	const [commentFormOpend, setCommentFormOpend] = useState(false);

	const onToggleLike = useCallback(() => {
		setLiked((prevLiked) => !prevLiked);
	}, []);
	const onToggleComment = useCallback(() => {
		setCommentFormOpend((prev) => !prev);
	}, []);
	const onRemovePost = useCallback(() => {
		dispatch(removePostRequestAction({ id: post.id }));
	}, []);
	return (
		<div style={{ marginTop: 10 }}>
			<Card
				cover={post.Images[0] && <PostImages images={post.Images} />}
				actions={[
					// 배열안에 들어가는 것들은 다 key를 넣어줘야 한다.
					<RetweetOutlined key='retweet' />,
					liked ? <HeartTwoTone key='heart' twoToneColor={"#eb2f96"} onClick={onToggleLike} /> : <HeartOutlined key='heart' onClick={onToggleLike} />,
					<MessageOutlined key={"comment"} onClick={onToggleComment} />,
					<Popover
						key={"more"}
						content={
							<Button.Group>
								{id && post.User?.id === id ? (
									<>
										<Button type='primary' key='modify'>
											수정
										</Button>
										<Button type='danger' key={"delete"} onClick={onRemovePost} loading={removePostLoading}>
											삭제
										</Button>
									</>
								) : (
									<Button type='dashed' key={"report"}>
										신고
									</Button>
								)}
							</Button.Group>
						}
					>
						<EllipsisOutlined />
					</Popover>,
				]}
				extra={id && <Followbutton post={post} />}
			>
				<Card.Meta avatar={<Avatar>{post.User?.nickname[0]}</Avatar>} title={post.User?.nickname} description={<PostCardContent postData={post.content} />} />
			</Card>
			{commentFormOpend && (
				<div>
					{/* 게시글의 아이디 위해서 post 넘겨줌 */}
					<CommentForm post={post} />
					<List
						header={`${post.Comments.length}개의 댓글`}
						itemLayout='horizontal'
						dataSource={post.Comments}
						renderItem={(item) => (
							<List.Item key={item.id}>
								<List.Item.Meta title={item.User?.nickname} avatar={<Avatar>{item.User?.nickname[0]}</Avatar>} description={item.content} />
							</List.Item>
						)}
					/>
				</div>
			)}
		</div>
	);
};

PostCard.propTypes = {
	post: PropTypes.shape({
		id: PropTypes.number,
		User: PropTypes.object,
		content: PropTypes.string,
		createdAt: PropTypes.string,
		Comments: PropTypes.arrayOf(PropTypes.object),
		Images: PropTypes.arrayOf(PropTypes.object),
	}).isRequired,
};

export default PostCard;
</code></pre>

센셕4 게시물 불러오기 postcard.js에서  post.User.nickname[0]에러

<p>껐다 켰다 검색해보니function* login(action) {
	try {
		// console.log("saga login");
		// console.log(action);
		// const result = yield call(loginAPI, action.data);
		yield delay(1000);
		yield put(loginSuccessAction(action.payload));
	} catch (err) {
		yield put({
			type: loginFailureAction,
			// data: err.response.data,
		});
	}
}</p><pre><code class="language-javascript"></code></pre><p>이런식으로</p><p>호출해주면 잘 되는것 같습니다.<br>loginSuccessAction(action.payload)</p><p>reducer에서는 데이터 받을때 proxy로 보여도 되는것 같습니다.</p><p>후 쉽지않네요. 혹시나 틀렸거나 수정할거있으면 알려주시면 감사하겠습니다 ; D</p>

toolkit, saga를 사용하는데 saga에서 로그인정보 받을때 state가 이전 state가 아니라 proxy데이터가 나옵니다.

antd ui라이브러리를 사용하니까 Cannot use import statement outside a module 에러가 나옵니다.

<p>답변 감사합니다.</p><p>여기저기 뒤져보다가 안돼서</p><p>새로운 프로젝트로 만들어서 해보니</p><p>잘되는것 같습니다. ㅠ</p><p>앞으로도 강의 열심히 보면서 더 배우겠습니다.<br>감사합니다.</p>

dydcodydco0983

Posts