我正在尝试制作一些类似于 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, repi?.replies, 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, null, 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,
author: child.author,
body: child.body,
permalink: child.permalink,
utc: child.created_utc,
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;