const [data, setData] = useState([]);
const addOne = (newObj) => {
setData((prev) => {
return [newObj, ...prev];
});
};
我从那里得到这样的数据:-
const [posts, refreshPosts, loadingPosts, reachedEnd, resetPosts, addOne] =
usePaginate(
`post/wall/${id}/${toSkip}`,
{
method: "GET",
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
},
setToSkip
);
然后将上面的内容传递给feed组件:-
const posts = props.posts.map((item) => {
return <Post data={item} />});
我从数据中创建我的post对象，然后在post中创建一个新的post，并尝试通过我上面发布的addOne方法将返回值添加到我的数组:-
const handleClick = async () => {
const url = "post";
const options = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
method: "POST",
body: JSON.stringify({ content: value, location: id }),
};
const post = await fetchData(url, options);
reset();
props.addOne(post)};
但它似乎不会触发重新渲染。在post组件中，我根据添加的新对象的ID进行调用，例如:-
const [
commentData,
refreshComments,
loadingComments,
reachedEnd,
resetComments,
addOne,
] = usePaginate(
`post/comments/${props.data._id}/${toSkip}`,
{
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
method: "GET",
},
setToSkip
);
我希望有一个新的对象，一个全新的帖子被创建，但它似乎没有这样做。似乎发生的是页面上的第一个元素部分重新呈现
<div className="postContent">
{profData && props.data.content} </div>
因此，页面顶部元素的文本内容更改以反映我试图添加的帖子的正确文本内容，但如果我在新帖子中添加新评论，然后在其上添加另一个帖子，只有props.data.content部分更改，以及"shell"的帖子保持不变(即整个帖子没有向下移动，所以评论仍然在页面的顶部帖子上，即使它们应该在第二个帖子上，因为顶部帖子现在显示来自最新数据项的内容)。
resetComments();
refreshComments();
refreshLikes();
我可以单独手动触发到达数据加载器，然后一切似乎按预期工作，但感觉我不应该这样做，因为他们应该检测到一个新的项目已经添加到我的数组，只是创建一个全新的post对象吗?它似乎没有任何问题与我的后端，因为一旦我刷新页面一切都应该是。我可以添加更多所需的信息，只是不想让帖子臃肿，所以试图选择似乎与问题相关的功能，但我知道其他东西可能会导致副作用。这件事已经困扰我好几个小时了。
git链接在这里，如果有人可以更仔细地看一下:-
https://github.com/Legandjl/odinbook_client
编辑
到目前为止，由于评论，我已经将返回[newObj, ...prev]改为return [...prev, newObj]，当新帖子最后渲染时，它似乎可以正常工作，但如果我尝试添加或不移动新对象，如const newArr = [...prev], newArr.unshift(newObj)，我要么得到黑屏或相同的问题。
在这篇文章的帮助下解决:-
在react
中向数组开头添加新项时出现的问题const posts = props.posts.map((item, i) => {
return <Post key={item._id} data={item} />;
});
帖子需要一个唯一的键，尝试索引，它没有工作，但随后使用_id，现在一切如预期。谢谢所有试图帮助我的人。