为什么一个函数会导致组件重新渲染，而另一个不会导致 Nextjs？

Question

在我的 Nextjs Web 应用程序中，我的一个页面有两个函数，允许使用 nextjs 的 useState() 从数组中添加或删除电子邮件。

const [invites, setInvites] = useState([])
// other code
const lmao = () => {
    console.log(invites)
}
const addEmail = async (email) => {
    if(!invites.includes(email)) {
        setInvites([...invites, email])

    }
    lmao()
}
const removeEmail = async (email) => {
    let tempArray = invites
    const index = tempArray.indexOf(email)
    if(index > -1) {
        tempArray.splice(index, 1)
    }
    setInvites(tempArray)
    lmao()
}

函数 addEmail 成功导致组件重新呈现，并且当运行时，将使用添加的电子邮件明显地更新页面。但是，函数 removeEmail 无法重新呈现页面。我使用函数 lmao() 查看 invites 确实根据需要进行了更改，只是页面没有重新呈现以显示更改。

我也看过，但它没有回答我的问题，因为在我的例子中，传递给突变器的项目是 not === 到它以前的值，除非我遗漏了什么。如果链接的问题确实解释了我的问题，有人可以进一步详细说明为什么 setInvites(tempArray) 即使它改变了状态值也不会导致重新渲染，以及我将如何更改我的代码来做到这一点？

Answer 1

我假设 tempArray 仍然是同一个数组，即同一个引用。我会把 setInvites([...tempArray]) 而不是 setInvites(tempArray) 放在 removeEmail

Answer 2

tempArray 是对同一数组的另一个引用，即它是 ===

let foo = ['a', 1, 'b']
let bar = foo
bar.splice(1, 1)

console.log(foo, bar, foo===bar) // [ 'a', 'b' ] [ 'a', 'b' ] true

您可以克隆阵列：

let bar = [...foo]

或者使用某种不改变原始数组的删除：

let bar = foo.filter(f => f !== 1)

在这两种情况下你都会得到

console.log(foo, bar, foo===bar) // [ 'a', 1, 'b' ] [ 'a', 'b' ] false

为什么一个函数会导致组件重新渲染，而另一个不会导致 Nextjs？

Why does one function cause component to rerender but the other does not Nextjs?

javascript

rendering

reactjs

next.js