我收到“未處理的拒絕（錯誤）：重新渲染太多。React 限制渲染次數以防止無限回圈。” 以下代碼的訊息。不確定是什么導致了這個問題。
我認為這是因為我setNewNotifications(combineLikesCommentsNotifications)在users.map回圈內呼叫了。但是如果我移出setNewNotifications(combineLikesCommentsNotifications)回圈，它就不能再讀取likeNewNotifications/ commentNewNotifications。什么是最好的方法？
下面的代碼，對于背景關系，users回傳：
const users = [
{
handle: "BEAR6",
posts: undefined,
uid: "ckB4dhBkWfXIfI6M7npIPvhWYwq1"
},
{
handle: "BEAR5",
posts: [
{
comment: false,
handle: "BEAR5",
key: "-Mmx7w7cTl-x2yGMi9uS",
like: {
Mn4QEBNhiPOUJPBCwWO: {
like_notification: false,
postId: "-Mmx7w7cTl-x2yGMi9uS",
postUserId: "rFomhOCGJFV8OcvwDGH6v9pIXIE3",
uid: "ckB4dhBkWfXIfI6M7npIPvhWYwq1",
userLikeHandle: "BEAR6"
}},
post_date: 1635260810805,
title: "hello"
},
{
comment: false,
comments_text: {0: {
comment_date: 1635399828675,
comment_notification: false,
commenter_comment: "hi1",
commenter_handle: "BEAR6",
commenter_uid: "ckB4dhBkWfXIfI6M7npIPvhWYwq1",
key: "-Mn4QF1zT5O_pLRPqi8q"
}},
handle: "BEAR5",
key: "-MmxOs0qmFiU9gpspEPb",
like: {
Mn4QDCOrObhcefvFhwP: {
like_notification: false,
postId: "-MmxOs0qmFiU9gpspEPb",
postUserId: "rFomhOCGJFV8OcvwDGH6v9pIXIE3",
uid: "ckB4dhBkWfXIfI6M7npIPvhWYwq1",
userLikeHandle: "BEAR6"},
Mn4QKEk95YG73qkFsWc: {
postId: "-MmxOs0qmFiU9gpspEPb",
postUserId: "rFomhOCGJFV8OcvwDGH6v9pIXIE3",
uid: "rFomhOCGJFV8OcvwDGH6v9pIXIE3",
userLikeHandle: "BEAR5"
}},
post_date: 1635265250442,
title: "hi"
}
],
uid: "rFomhOCGJFV8OcvwDGH6v9pIXIE3"
}
]
代碼
import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
export default function Notifications() {
const [newNotifications, setNewNotifications] = useState('')
const users = useSelector(state => state.users)
return users.map((post) => {
if(post.posts){
return post.posts.map((postContent) => {
const likes = postContent.like ? Object.values(postContent.like) : null
const comments = postContent.comments_text ? Object.values(postContent.comments_text) : null
const likeNewNotifications = likes ? likes.filter(post => {
return post.like_notification === false
} ) : null
const commentNewNotifications = comments ? comments.filter(post => {
return post.comment_notification === false
} ) : null
const combineLikesCommentsNotifications = likeNewNotifications.concat(commentNewNotifications)
setNewNotifications(combineLikesCommentsNotifications)
}
)
}
return (
<div>
<p>
{newNotifications}
</p>
</div>
);
}
)
}
uj5u.com熱心網友回復：
有多個錯誤。但是讓我們一步一步面對它。
我將復制并粘貼您的代碼，但有額外的注釋，讓您知道我參考的位置：
import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
export default function Notifications() {
const [newNotifications, setNewNotifications] = useState('')
const users = useSelector(state => state.users)
// Step 0: I guess the error is because this users.map is running everytime (with any update in the component. So, when you set a new state, it'll render again. So, you have to do this, probably 2 times: on mount and after one update.
// Step 1: You're using users.map but it returns a new array. My recommendation would be: use users.forEach instead.
return users.map((post) => {
if(post.posts){
return post.posts.map((postContent) => {
const likes = postContent.like ? Object.values(postContent.like) : null
const comments = postContent.comments_text ? Object.values(postContent.comments_text) : null
const likeNewNotifications = likes ? likes.filter(post => {
return post.like_notification === false
} ) : null
const commentNewNotifications = comments ? comments.filter(post => {
return post.comment_notification === false
} ) : null
const combineLikesCommentsNotifications = likeNewNotifications.concat(commentNewNotifications)
setNewNotifications(combineLikesCommentsNotifications)
}
)
}
return (
<div>
<p>
{newNotifications}
</p>
</div>
);
}
)
}
（閱讀第 0 步和第 1 步作為代碼中的注釋）另外，關于：
但是如果我將 setNewNotifications(combineLikesCommentsNotifications) 移到回圈之外，它就不能再像 NewNotifications / commentNewNotifications 一樣讀取。什么是最好的方法？
您可以執行
第 3 步：為了能夠做到這一點，您可以使用 let，在回圈的父級中設定一個變數并更新回圈內的值（或者如果您有一個陣列，即使它是 也可以推送const）。它會像：
function foo() {
const users = [{}, {}, {}, {}];
const usersWithEvenId = [];
users.forEach(user => {
if (user.id % 2 === 0) {
usersWithEvenId.push(user)
}
})
}
考慮到這 3 個步驟，結果代碼如下：
import React, { useState, useEffect} from 'react';
import { useSelector, useDispatch } from 'react-redux';
export default function Notifications() {
const [newNotifications, setNewNotifications] = useState('');
const users = useSelector(state => state.users);
// Function to get new posts
const getNewPosts = () => {
const notifications = [];
users.forEach((user) => {
if (user.posts) {
posts.forEach((post) => {
// Your logic;
notifications.push(newNotifications)
})
}
});
setNewNotifications(notifications);
};
// Run to get newPosts on mount (but also in any other moment)
useEffect(() => {
getNewPosts();
}, [])
return (
<div>
<p>
{newNotifications}
</p>
</div>
);
}
uj5u.com熱心網友回復：
也許你可以這樣寫代碼：
import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
export default function Notifications() {
const users = useSelector((state) => state.users);
const combineLikesCommentsNotifications = users.map((post) => {
if (post.posts) {
return post.posts.map((postContent) => {
const likes = postContent.like ? Object.values(postContent.like) : null;
const comments = postContent.comments_text
? Object.values(postContent.comments_text)
: null;
const likeNewNotifications = likes
? likes.filter((post) => {
return post.like_notification === false;
})
: null;
const commentNewNotifications = comments
? comments.filter((post) => {
return post.comment_notification === false;
})
: null;
const combineLikesCommentsNotifications = likeNewNotifications.concat(
commentNewNotifications
);
setNewNotifications(combineLikesCommentsNotifications);
});
}else{
return [];
}
})
const [newNotifications, setNewNotifications] = useState(combineLikesCommentsNotifications);
return (
<div>
<p>{newNotifications}</p>
</div>
); ;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/340827.html
標籤：javascript 反应
上一篇：查找標簽開始和結束之間的特定單詞