reactjs - 渲染的反应钩子比预期的要少
问题描述
它看起来像我的 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 && posts.length % 10 === 0) {
let next
if (router.pathname === "/") {
next = filteredPosts.length && usePost(filteredPosts[filteredPosts.length - 1].id, {}, true)
} else {
next = filteredPosts.length && 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 && nextPosts.length >= 1 ? (
<LoadMoreDiv onClick={() => fetchNextTen()}>
LOAD MORE <KeyboardArrowDownIcon />
</LoadMoreDiv>
) : null}
</SCardContent>
</SCard>
</Container>
</>
)
}
export default PostsFeedContainer
在我用上面的钩子关闭模式后弹出错误。我错过了什么?
先感谢您!
解决方案
在每个渲染中应该有相同数量的钩子调用。在你的情况下,你是有条件地打电话useMoment
的usePost
。所有的钩子调用都必须在组件的顶层。从条件语句中删除自定义挂钩的调用,它应该可以正常工作。
推荐阅读
- dpdk - DPDK ixgbe 驱动程序未呈现正确的链接状态
- github-pages - 我在 GITHUB 页面上部署项目没有出现在浏览器上
- python - 从 bokeh==2.1.1 升级到 bokeh==2.2.0 会破坏 figure.image_rgba()
- laravel - 按活动日期而不是用户关注的顺序
- azure - 在 Azure Functions 中,我可以将 C# HttpTrigger 与 Python HttpTrigger 结合使用吗
- r - 用 R 在图中突出显示一个句点
- websphere - 相同的代码在一个 Websphere 应用程序服务器环境中抛出 java.io.NotSerializableException 而不是另一个
- functional-programming - 带有方案的纯功能堆栈实现
- sql - 为 1 列中的用户返回多个角色而不是多行
- loops - Lisp 中的子列表