我有一個討論/帖子型別的應用程式，成員可以在其中創建帖子。一個帖子將有一個正常的頁眉、正文和頁腳。每個帖子可以有多個回復，每個回復也是一個帖子。該帖子可以有自己的回復。我已經設法對所有后端內容進行了排序，但如何在 React 中組織這些內容。我正在使用帶有 React 前端的 Symfony 后端和 web pack encore 我不確定如何在 React 中執行遞回邏輯。當我測驗整個瀏覽器崩潰時，我假設它是因為我不知道如何放置基本條件來停止遞回。
我確定的是：總會有一個父帖子，如果沒有回應，ResponseList 可以回傳一個空組件
我創建了一個簡單的虛擬示例，代碼如下：
const sampleResponses = [
{
heading: 'Response Heading 1',
body: 'Response Body 1',
footer: 'Response Footer 1'
},
{
heading: 'Response Heading 2',
body: 'Response Body 2',
footer: 'Response Footer 2'
},
{
heading: 'Response Heading 3',
body: 'Response Body 3',
footer: 'Response Footer 3'
},
];
const ResponseHandler = (props) => {
return (props.responses == []) ? null : (
<ul>
{
props.responses.map((response, index) => {
return (
<li key={index}>
<Post
heading={response.heading}
body={response.heading}
footer={response.footer}
/>
</li>
);
})
}
</ul>
);
}
const Post = (props) => {
const [heading, setHeading] = useState("");
const [body, setBody] = useState("");
const [footer, setFooter] = useState("");
const [responses, setResponses] = useState([]);
useEffect(() => {
setHeading(props.heading ?? "Default Heading");
setBody(props.body ?? "Default Body");
setFooter(props.body ?? "Default Footer");
}, [])
const getResponses = (e) => {
setResponses(sampleResponses);
}
const removeResponses = (e) => {
setResponses([]);
}
return (
<div>
<article>
<header>
<h1>{heading}</h1>
</header>
<main>
{body}
</main>
<footer>
{footer}
</footer>
</article>
<button onClick={getResponses}>
Get responses
</button>
<button onClick={removeResponses}>
Remove responses (For testing)
</button>
<ResponseHandler responses={responses} />
</div>
);
}
這是將有回應的基本帖子：
//Post.js
export default function Post(props) {
const [id, setId] = useState(0);
const [heading, setHeading] = useState("This is a dummy post heading");
const [body, setBody] = useState(
"This is dumy post body. This will be deleted later when we create & connect the API"
);
const [authorName, setAuthorName] = useState("Crow Ice");
const [avatar, setAvatar] = useState("This will be some CDN in the end");
const [posted, setPosted] = useState("Nov 23 2021 - 18:30");
const [updated, setUpdated] = useState("Nov 14 2021 - 20:00");
const [responseCount, setResponseCount] = useState(487);
const [isEditor, setIsEditor] = useState(false);
return (
<Article whiteShade="0.3">
<PostHeader
posted={posted}
updated={updated}
authorName={authorName}
responseCount={responseCount}
avatar={moonTest2}
isEditor={isEditor}
/>
<PostBody body={body} />
<PostFooter
posted="Nov 23 2021 - 18:30"
updated="Nov 23 2021 - 18:30"
authorName="Rob Hush"
avatar={moonTest2}
responseCount={responseCount}
isEditor={false}
/>
</Article>
)
}
uj5u.com熱心網友回復：
問題在于您使用的示例資料。遞回永遠不會停止，因為組件每次都使用相同的陣列。
ResponseList組件中使用的回應陣列必須作為道具傳遞（或以其他方式，但理論上它們應該隨著遞回的繼續而減少）。
每個回應物件可以是這樣的：
{
heading: "Response Heading 2",
body: "Response body 2",
footer: "Response Footer 2",
responses: [] // this can be used for rendering the nested responses and to stop the recursion
}
回應可以是可選的。在組件中，您可以選中responses?.length停止或繼續遞回。
定義資料的另一種方法是通過 id 鏈接回應
{
id: 1,
heading: "Response Heading 2",
body: "Response body 2",
footer: "Response Footer 2",
// this post might have some responses but they are not nested here
},
{
id: 2,
heading: "Response Heading 2",
body: "Response body 2",
footer: "Response Footer 2",
parentId: 1, // this is the response to the post with id 1
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/359897.html