如何避免此消息警告“最大更新深度超过...”在NextJS上

Question

在NextJS上，我不明白使用效率如何工作。我需要做的事情，以停止接收此警告消息 “超过最大更新深度”：

Code Bellow是页面，调用组件ListContainer，此页面将项目添加到容器中。

页面JSX：

    import { useState } from "react";
import AppLayout from "../components/AppLayout";
import ListContainer from "../components/ListContainer";

export default function componentCreator(){


  
    const [item,setItem] = useState([])   

/* add item to container */
    function addItem(){

        let newItem = item
        newItem.push({
            produto: 'Skol 350ml',
            preco: '1200,00',
            quantidade: 'cx c/ 15 unidades'
        })
        setItem(newItem)

    }

    return (
        <AppLayout>
            <ListContainer items={item} setItems={setItem}/>
            <div className="productcardbuttonshow" onClick={() => addItem()}>ADICIONAR</div>
        </AppLayout>
    )
}

呼吸处理项目的组件，删除或添加。但是它有效，但是在控制台上触发有关更新的警告消息。 组件ListContainer.jsx：

import { useState,useEffect } from "react";
export default function ListContainer(props){

    const [html,setHTML] = useState(null)
    const [item,setItem] = useState(props.items)
  
/* refresh html container */
    useEffect(() => {
        const itemHTML = item.map((itemmap,id) => {
            return (
                <div id={id} onClick={() => delItem(id)} className="itemProposta">
                    {itemmap.produto} - {itemmap.quantidade} - R$ {itemmap.preco}
                </div>
            )
        })
        setHTML(itemHTML)
    })

/* remove item from container */
    function delItem(id){
        let itemlist = props.items
        itemlist.splice(id,1)
        props.setItems(itemlist)
    }

    return (
        <>
        {html}
        </>
    )
}

Answer 1

您正在进入无限的渲染循环。此代码负责：

useEffect(() => {
        const itemHTML = item.map((itemmap,id) => {
            return (
                <div id={id} onClick={() => delItem(id)} className="itemProposta">
                    {itemmap.produto} - {itemmap.quantidade} - R$ {itemmap.preco}
                </div>
            )
        })
        setHTML(itemHTML)
    })

此回调使用效果在每个渲染后都会运行，因为没有依赖项数组。这意味着在每次渲染后，sethtml（itemhtml）被调用。即使数组的组成对象itemHtml是相同的，也会创建数组的新引用。由于.map（）返回数组的新引用，因此创建了一个新的引用。尽管渲染和更新正常，但正在发生无限渲染。

考虑添加dependency array to useEffect.例如：

useEffect(() => {
/* function body */
},[props.items]);

现在使用回调仅在props.items参考更改时运行。

旁注（与您的问题无关）：
在以下代码中，

  function addItem(){

        let newItem = item
        newItem.push({
            produto: 'Skol 350ml',
            preco: '1200,00',
            quantidade: 'cx c/ 15 unidades'
        })
        setItem(newItem)

    }

您应该执行let newitem = [... item]，否则您不会创建iteg> item array和setItem（newitem）的新参考）在这种情况下基本上没有用。