Блог

Я схожу с ума, пытаясь понять, почему я продолжаю получать эту ошибку:

Похоже, что это связано с моим setShowCreatePostModal, но, несмотря на то, как я размещаю этот крючок или как он передается через опору, я все еще получаю ошибку.

 const PostsFeedContainer: FunctionComponent<PostsFeedContainerProps> = ({
  loggedInUserImageUrl,
  posts,
  onMutatePosts,
  checkedIn,
  profile,
  handleCollection,
  momentId,
}: PostsFeedContainerProps) => {
  const [filteredPosts, setFilteredPosts] = useState(posts)
  const [momentsList, setMoments] = useState([])
  const [showCreatePostModal, setShowCreatePostModal] = useState<boolean>(false)
  const { updateStore } = useContext(AppContext)
  const { moments } = useMoments()
  const router = useRouter()

  useEffect(() => {
    if (moments?.length) {
      setMoments(moments)
    }

  }, [moments])

  let nextPosts = [];
  if (posts.length != 0 amp;amp; posts.length % 10 === 0) {
    let next
    if (router.pathname === "/") {
      next = filteredPosts.length amp;amp; usePost(filteredPosts[filteredPosts.length - 1].id, {}, true)
    } else {
      next = filteredPosts.length amp;amp; useMoment(momentId, {}, true, 10, filteredPosts[filteredPosts.length - 1].id)
    }
    const { data: nextPost } = next
    nextPosts = nextPost
  }

  const handleModalOpen = () => {
    if (!profile) {
      updateStore({ isAlertLoginModalOpen: true })
      return
    }
    if (!checkedIn) {
      toast("Please check in to the moment.", toastProps)
    } else {
      setShowCreatePostModal(true)
    }
  }

  const handleModalClose = () => {
    // if (onMutatePosts) onMutatePosts()

    if (showCreatePostModal) {
      setShowCreatePostModal(false)
    }
  }

  const fetchNextTen = () => {
    setFilteredPosts(filteredPosts.concat(nextPosts))
  }

  const handleDelete = (id) => {
    const filtPosts = filteredPosts.filter((item) => item.id !== id)
    setFilteredPosts(filtPosts)
  }

  const handleAdd = async (p) => {
    await filteredPosts.unshift(p)
    handleModalClose();
  }

  return (
    <>
      <CreatePostModal showModal={showCreatePostModal} handleAdd={handleAdd} />
      <Container container item>
        <SCard>
          <SCardContent p={0} m={0}>
            <InputArea
              isHeader
              placeholder="Start a post"
              userImage={loggedInUserImageUrl}
              inputDescription="Share tips, stories, questions and even overshares that you're going through"
              onClick={handleModalOpen}
              disabled={!checkedIn}
              p="sm"
              pt="md"
              pb="md"
            />
            <TrendingTags isPeach smOnly />
            <SGrid container item mt={50} align="center" justify="center" direction="row">
              {posts.length ? (
                filteredPosts.map((post) => (
                  <PostCard
                    handleDelete={handleDelete}
                    key={post.id}
                    {...post}
                    likesCount={post.likesCount}
                    liked={post.liked}
                    loggedInUser={{
                      userImageUrl: loggedInUserImageUrl,
                      userImageAlt: "",
                    }}
                    moment={momentsList.find((m) => m.id === post.momentId)}
                    linkable
                    handleCollection={handleCollection}
                  />
                ))
              ) : (
                <Text align="center" small pb="md">
                  Sorry, no results found
                </Text>
              )}
            </SGrid>
            {nextPosts amp;amp; nextPosts.length >= 1 ? (
              <LoadMoreDiv onClick={() => fetchNextTen()}>
                LOAD MORE <KeyboardArrowDownIcon />
              </LoadMoreDiv>
            ) : null}
          </SCardContent>
        </SCard>
      </Container>
    </>
  )
}

export default PostsFeedContainer
 

Ошибка появляется после того, как я закрываю модал с помощью крючка выше. Что я упускаю?

Заранее благодарю вас!

В каждом рендеринге должно быть одинаковое количество вызовов хуков. В вашей ситуации вы звоните useMoment и usePost условно. Все вызовы крючков должны находиться на верхнем уровне компонента. Удалите вызовы пользовательских крючков из ваших условных операторов, и это должно работать нормально.