Javascript 在React中呈现具有独立状态的组件数组

好的！因此，类似的问题已经被问到了，但问题是，它们不能解决我的确切问题，所以请阅读完整的问题，并考虑看下面粘贴的代码片段，然后将其标记为重复。因此，我有一个对象数组

menuItems

，其中包含另一个组件

MenuItem

的道具，我试图通过迭代该数组“

menuItems

”多次渲染该组件

MenuItem

”给它分配唯一的道具，然后把它推到另一个名为

items

的数组中，完成后，我将这个

items

数组放在返回中，但不知怎的，react根本没有呈现该数组

function Menu() {

    let items = [];

    const menuItems = [
        {
            imageName:'food-header-2.jpg',
            itemTitle:'Full breakfast for morning',
            itemPunchLine:'Some punchline',
            quantity:0,
        },
        {
            imageName:'pizza.jpg',
            itemTitle:'Cheeze pizza',
            itemPunchLine:'Some punchline',
            quantity:0,
        },
        {
            imageName:'burger.jpg',
            itemTitle:'Jumbo Burger',
            itemPunchLine:"Some punchline",
            quantity:0,
        },
        {
            imageName:'sandwich.jpg',
            itemTitle:'Veg SandWich',
            itemPunchLine:'Some punchline',
            quantity:0,
        },
        {
            imageName:'chocolate-shake.jpg',
            itemTitle:'Chocolate Shake',
            itemPunchLine:'Some punchline',
            quantity:0,
        },
    ]

    const useEffect(() => {

        menuItems.forEach((menuItem,index) => {
            items.push(
            <MenuItem key={index} title={menuItem.itemTitle} punchLine={menuItem.itemPunchLine} 
            quantity={menuItem.quantity} imageName={menuItem.imageName}
            />);
        }));

        
    };
    return(
        <div className="container">
            <div className="menu-holder">
                <div className="menu">
                    {items}                 
                </div>
            </div>            
        </div>
    )
}

功能菜单（）{
设项目=[]；
常量菜单项=[
{
imageName:'food-header-2.jpg'，
项目名称：“早上的全套早餐”，
itemPunchLine:“一些punchline”，
数量：0，
},
{
imageName:'pizza.jpg'，
商品名称：“奶酪比萨饼”，
itemPunchLine:“一些punchline”，
数量：0，
},
{
imageName:'burger.jpg'，
商品名称：'Jumbo Burger'，
itemPunchLine：“一些punchline”，
数量：0，
},
{
imageName:'sandwich.jpg'，
项目名称：“蔬菜三明治”，
itemPunchLine:“一些punchline”，
数量：0，
},
{
imageName:'chocolate-shake.jpg'，
商品名称：“巧克力奶昔”，
itemPunchLine:“一些punchline”，
数量：0，
},
]
const useffect（（）=>{
menuItems.forEach（（menuItem，索引）=>{
推(
);
}));
};
返回(
{items}
)
}

项

是一个普通数组。它不是有状态值（即使用

useState

hook）。此值更改时，React不会重新渲染

相反，您应该在return语句中使用

map

直接呈现

menuItems

：

 return(
    <div className="container">
        <div className="menu-holder">
            <div className="menu">
                {menuItems.map((menuItem,index) => 
                  <MenuItem
                    key={index} 
                    title={menuItem.itemTitle} 
                    punchLine={menuItem.itemPunchLine} 
                    quantity={menuItem.quantity}
                    imageName={menuItem.imageName}
                  />)}
            </div>
        </div>
    </div>
)

但是，如果您在渲染时知道

menuItems

，则直接将初始状态设置为该状态将更有效（而不是在

useffect

挂钩中渲染后设置它：

  const [items, setItems] = useState(menuItems);

---

items

是一个普通数组。它不是一个有状态值（即使用

useState

hook）。当此值更改时，React不会重新呈现

相反，您应该在return语句中使用

map

直接呈现

menuItems

：

 return(
    <div className="container">
        <div className="menu-holder">
            <div className="menu">
                {menuItems.map((menuItem,index) => 
                  <MenuItem
                    key={index} 
                    title={menuItem.itemTitle} 
                    punchLine={menuItem.itemPunchLine} 
                    quantity={menuItem.quantity}
                    imageName={menuItem.imageName}
                  />)}
            </div>
        </div>
    </div>
)

但是，如果您在渲染时知道

menuItems

，则直接将初始状态设置为该状态将更有效（而不是在

useffect

挂钩中渲染后设置它：

  const [items, setItems] = useState(menuItems);

---

对于React to watch For state changes，您可以使用

useState

hook跟踪阵列状态的变化

const [items, setItems] = useState([])

---

对于React to watch For state changes，您可以使用

useState

hook跟踪阵列状态的变化

const [items, setItems] = useState([])

---

这工作得非常好，但是我尝试使用相同的

数组。在
useffect
钩子中映射
，然后尝试渲染数组，它停止工作并引发一个错误
对象作为react子对象无效
我想问为什么会这样？而
map
如何使数组有状态？我已经扩展了回答，尝试显示您应该使用的模式。
map
在React中不会使值成为有状态的，它只是一种迭代数组并返回新数组的方法。这非常有效，但我尝试在
useffect
钩子中使用相同的
array.map
，然后尝试渲染它停止工作的数组react抛出一个错误
对象作为react子对象无效
我想问为什么会这样？以及
map
如何使数组有状态？我扩展了答案，以尝试显示您应该使用的模式。
map
在react中不会使值有状态，它只是一种在数组上迭代并返回新值的方法数组。你的意思是我应该在
menuItems.forEach
循环中执行
setItems（[…items，newItem]）
吗？你的意思是我应该在
menuItems.forEach
循环中执行
setItems（[…items，newItem]）
吗？