我正在嘗試使用 react 創建評論部分。該組件使用外連接提取一個大型資料集中的所有評論和對每個評論的回復，然后將結果復制到兩個單獨的陣列中（評論陣列和回復陣列）
但是，當我嘗試將注釋陣列設定為狀態變數時，組件會無限地重新呈現自己。
我在出現問題的地方添加了一條評論。取消注釋它下面的行會導致程式正常作業，但地圖功能沒有任何顯示
import React, {useState, useEffect} from 'react'
import Axios from 'axios';
import {Form, Button} from 'react-bootstrap';
import Comment from './Comment';
import { render } from 'react-dom';
function Thread(props) {
const {threadID} = props;
const [commentBody, setCommentBody] = useState('');
const [replyArray, setReplyArray] = useState([]);
const [commentArray, setCommentArray] = useState([]);
const [comments, setComments] = useState([]);
let commentResponse = [];
useEffect(() => {
Axios.get(`http://localhost:3001/api/selectcomments/${threadID}`).then((res) => {
commentResponse = res.data;
});
}, [threadID]);
let tempReplies = [];
let tempComments = [];
for(let i = 0 ; i < commentResponse.length; i )
{
tempComments.push({body: comments[i].body, commentID: comments[i].commentID})
tempReplies.push({replyBody: comments[i].replyBody, commentID: comments[i].commentID})
}
let filteredArray = [...new Map(tempComments.map(x => [x['commentID'], x])).values()]
console.log("splitArray called")
//CAUSES INFINITE RENDER LOOP
setCommentArray(filteredArray);
return (
<section className="comment-wrapper">
<div className="comment-section">
<h2>Comments</h2>
<Form>
<Form.Control
as="textarea"
rows={3}
placeholder="Leave a Comment"
onChange={(val) => {
setCommentBody(val);
}}
/>
</Form>
<Button
// all elements in the comment section have a default margin of 1rem, but this looks strange when applied to this button
style={{ "margin-top": "0rem" }}
type="submit"
variant="primary"
>
Post
</Button>
{
commentArray.map((data) => {
console.log('map function for thread fired');
console.log(commentArray)
const {commentID, body} = data;
const replies = replyArray.filter(x => x.commentID == commentID)
return (
<>
<Comment username="User1" body={body} commentId = {commentID}/>
{
replies.map((replyData)=>{
if(!(replyData.replyBody == null))
{
return(
<div className="reply">
<h3>Username</h3>
<p>{replyData.replyBody}</p>
</div>
)
}
}
)}
</>
);
})}
</div>
</section>
) }
匯出默認執行緒
uj5u.com熱心網友回復：
你遇到了一個問題，因為你每次重新渲染組件時都會無條件地設定狀態；導致又一次重新渲染。
在這種情況下，您需要退后一步，考慮何時真正需要您的 UI 重新繪制自身。在這種情況下，就目前的代碼而言，它非常簡單——當一些資料從服務器 API 回傳時。
您已經then()在. 這里實際上是在設定狀態之前進行所有陣列切片和切塊的理想位置，這將導致重新繪制：Axios.getuseEffect
useEffect(() => {
Axios.get(
`http://dummy.restapiexample.com/api/v1/employee/${threadID}`
).then((res) => {
commentResponse = res.data;
let tempReplies = [];
let tempComments = [];
for (let i = 0; i < commentResponse.length; i ) {
tempComments.push({
body: comments[i].body,
commentID: comments[i].commentID
});
tempReplies.push({
replyBody: comments[i].replyBody,
commentID: comments[i].commentID
});
}
let filteredArray = [
...new Map(tempComments.map((x) => [x["commentID"], x])).values()
];
console.log("splitArray called");
// This should now work fine - no infinite looping
setCommentArray(filteredArray);
});
}, [threadID]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/440333.html