如何解决如何阻止 React 陷入无限循环？
我正在尝试制作一些类似于 reddit 评论部分的内容，其中回复相互嵌套。我已经设置了几乎所有完成递归函数的问题，当我按下按钮时，我希望新回复出现，就像手风琴效果一样，我得到的基本上是旧回复和新回复。
所以我试图通过制作一个 const [acknowledge setAcknowledge] = useState([]) 来阻止重复，我遇到了一个循环，因为这里是一点：
const helperFunction = (repi,idx) => {
return (
<>
{ /// first I want to see if the id is in my acknowledge if it is return null otherwise display and get those divs
acknowledge.includes(repi?.id) ? null :
<div key={repi?.id} className="container-nested-replies">
<p className="repeat-reply-author">{repi?.author}</p>
<p className="repeat-reply-text">{repi?.body}</p>
<p className="timeStamp">{timeAgo(repi?.utc * 1000)}</p>
{
typeof repi?.replies === 'object' &&
// trying to make the recursion Function here the function is calling itself
<TiMessage onClick={(e) => recursionReplies(null,repi?.replies,null,idx)} className="reddit-symbol post-symbol" />
}
{/* {setReplyRepeat(idx)} */}
</div>
}
{setAcknowledge([...acknowledge,repi?.id])} // at the end I want push the ID into the state of acknowledge to check validation for this BUT THIS IS GIVING ME THE INIFINTE LOOP HOW CAN I STOP IT??
</>
)
}
那个 setAcknowledge([...acknowledge,repi?.id]) 给了我无限循环
这个函数存在于我的 Reply 组件中，它是：
import React,{ useState,useEffect } from 'react';
import { useSelector,useDispatch } from 'react-redux';
import { TiMessage } from 'react-icons/ti';
import { repeatReplies,selectRepeatReplies } from '../../../../../feature/post/postSlice.js'
import { timeAgo } from '../../../../../util/mathWork.js';
const Reply = (props) => {
const { idx,repliesClick,allReplies } = props;
const [repeating,setRepeating] = useState(null);
const [replyRepeat,setReplyRepeat] = useState(null);
const [acknowledge,setAcknowledge] = useState([]);
const theRepeat = useSelector(selectRepeatReplies); // grabbing the redux
const dispatch = useDispatch();
const recursionReplies = (replies,secondReplies = undefined,count = undefined,idx = undefined) => {
if (replies === undefined || replies === null) {
replies = ["hi","damn","you"]
} else if (Object.values(replies).length === 1 || Object.values(replies).length === 0) {
return;
}
if (secondReplies !== null && secondReplies !== undefined) {
if (replyRepeat === idx) {
setReplyRepeat(null);
} else {
setReplyRepeat(idx);
dispatch(repeatReplies(secondReplies.data.children.map(child => child.data)))
}
} else {
if (repeating === count) {
console.log("Im parent count but turn me off")
setRepeating(null)
} else {
console.log("Im parent count but turn me on")
setRepeating(count) // toggle on
dispatch(repeatReplies(replies.data.children.map(child => child.data)));
}
}
}
const helperFunction = (repi,idx) => {
return (
<>
{
acknowledge.includes(repi?.id) ? null :
<div key={repi?.id} className="container-nested-replies">
<p className="repeat-reply-author">{repi?.author}</p>
<p className="repeat-reply-text">{repi?.body}</p>
<p className="timeStamp">{timeAgo(repi?.utc * 1000)}</p>
{
typeof repi?.replies === 'object' &&
// trying to make the recursion Function here the function is calling itself
<TiMessage onClick={(e) => recursionReplies(null,idx)} className="reddit-symbol post-symbol" />
}
</div>
}
{setAcknowledge([...acknowledge,repi?.id])}
</>
)
}
useEffect(() => {
/// trying some how to stop the infinite loop here but I am clueless on how to stop it
/// even put the acknowledge as a dependency array
},[dispatch,allReplies,theRepeat,replyRepeat,repeating,acknowledge])
return (
<>
{
repliesClick === idx &&
<div className="reply-container">
{
allReplies.length > 0 && allReplies.map((reply,count) =>
<div className="reply-div" key={reply.id}>
<p className="relpy-author">{reply.author}</p>
<p className="reply-text">{reply.body}</p>
<p className="timeStamp">{timeAgo(reply.utc * 1000)}</p>
{
typeof reply.replies === 'object' &&
// first stage of the function when it is pressed
<TiMessage onClick={(e) => recursionReplies(reply.replies,count,null)} className="reddit-symbol post-symbol" />
}
{
repeating === count &&
theRepeat.map(val =>
val.map((repi,idx) =>
<>
{helperFunction(repi,idx)}
{replyRepeat === idx && helperFunction(repi,idx)}
</>
))
}
</div>
)
}
</div>
}
</>
)
}
export default Reply;
这里是 redux，我将它分派到然后收集回来
redux 文件：
import { createSlice,createAsyncThunk } from "@reduxjs/toolkit";
import reddit from "../../util/reddit-data";
export const postThunk = createAsyncThunk(
'posts/postThunk',async (permalink) => {
const post = await Promise.resolve(reddit.getPost(permalink))
return post;
}
);
export const repliesThunk = createAsyncThunk(
'posts/repliesThunk',async (permalink) => {
const replies = await Promise.resolve(reddit.getPost(permalink))
return replies;
}
);
const postSlice = createSlice({
name: 'posts',initialState: {
posts: [],replies: [],repeatReplies: [],postLoading: false,postError: false
},reducers: {
repliesList(state,action) {
/* this grabs the inital reply from the post when the React.Component dispatches the replies to this payload */
state.replies = action.payload.data.children.map(child => ({
id: child.data.id,author: child.data.author,body: child.data.body,permalink: child.data.permalink,utc: child.data.created_utc,replies: child.data.replies
}))
},repeatReplies(state,action) {
const obj = action.payload.map(child => ({
id: child.id,author: child.author,body: child.body,permalink: child.permalink,utc: child.created_utc,replies: child.replies
}))
state.repeatReplies.push(obj);
}
},extraReducers: { //
[postThunk.pending]: (state) => {
state.postLoading = true;
state.postError = false;
},[postThunk.fulfilled]: (state,action) => {
state.postLoading = false;
state.postError = false;
state.posts = (action.payload.map(child => ({
id: child.id,replies: child.replies
})))
},[postThunk.rejected]: (state) => {
state.postLoading = false;
state.postError = true;
},}
})
export const { repliesList,repeatReplies } = postSlice.actions;
export const selectPostLoading = (state) => state.posts.postLoading;
export const selectPost = (state) => state.posts.posts;
export const selectRepliesList = (state) => state.posts.replies;
export const selectRepeatReplies = (state) => state.posts.repeatReplies;
export default postSlice.reducer;
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。