Next.js在道具列表中刷新值而不重新加载页面

Question

可能我在接下来的任务中有点迷路了。我有一个管理页面在我的应用程序，你可以看到从平台上的所有帖子。我请求从api和我在页面上显示它们作为一个列表的帖子。插入两个按钮，通过调用一个函数来启用/禁用该帖子，该函数将该帖子标记为启用/禁用。

一切工作正常，但我想改变按钮的状态，而不重新加载页面。我传递disable参数抛出按钮标签。我不知道为什么不行，如果我用console.log，值已经改变了。这是正确使用useeffect的方法吗?我试着使用它，但我没有正确使用它。

有人能帮忙吗?

简化代码(我删除了enable函数，因为它几乎与disable相同)

export default function Feed(props) {
const [postStatus, setPostStatus] = useState(props.posts)

async function disablePost(id, e){
e.preventDefault();
const userInput = { postId: id }
try{
const res = await axios.post(`${baseurl}/api/auth/admin/disable-post`, userInput, {
})

var currentPostStatus = postStatus;
currentPostStatus.map((el) => {
if(el.id === id){
el.disabled = true;
}
console.log(el.id)
});

setPostStatus(currentPostStatus)
console.log(postStatus)
}catch(error){
console.log(error)
return
}
}

return (
<>
<HeaderAdmin></HeaderAdmin>
<div>
{/* {console.log(props.userCount)} */}
<p>Alle Posts</p>
{postStatus.map((post) => 

<React.Fragment key={post.id}>
<p>{post.id}</p>
<p>{post.email}</p>
<p>{post.desc}</p>
<p>{post.disabled == true ? 'Post deaktviert' : 'Post aktiviert'}</p>

<button disabled={ post.disabled } onClick={(e) => disablePost(post.id, e)}>Post deaktivieren</button>
<button disabled={ !post.disabled } onClick={(e) => enablePost(post.id, e)}>Post aktivieren</button>
</React.Fragment>
)}
</div>
</>
);
}

Answer 1

单击disable或enable后，屏幕无法刷新到新版本

var currentPostStatus = postStatus;
currentPostStatus.map((el) => {
if(el.id === id){
el.disabled = true;
}
});

在你的代码中，你只改变了postStatus的内部属性，但是React只关心对象的引用。所以你需要输入

setPostStatus([...currentPostStatus])

上面这行创建了一个新的数组。我个人认为这是未来React应该改进的地方，因为在stackoverflow中关于React的问题有一半是在讨论这个:)