React useEffect() 正在重新渲染，但动态值不会反映在屏幕上

Question

当我单击"+"号时，我需要增加状态的值。即使 useEffect 正在运行，但状态的更改值不会更新屏幕上的文本。

初始状态 ：

const italianMenu = [
{
name: "White Sauce Pasta",
price: "$15",
type: "veg",
qty: 0,
itemId: "italian-1"
},
{
name: "Red Sauce Pasta",
price: "$15",
type: "veg",
qty: 0,
itemId: "italian-2"
}
]

这是功能组件：

const CheckForms = () => {
const [italian, editItalian] = useState(italianMenu);
const addMore = (e) => {
const updatedMenu = italian.map( each => {
if(each.itemId === e.target.id) {
return {
...each, qty: each.qty + 1
}
}
else {
return each;
}
});
editItalian(updatedMenu);
}
const addLess = (e) => {
}
useEffect(() => {
console.log(italian)        // output is perfect on console.log everytime
}, [italian]);
return (
<div className="container CheckForms">
<h1 className="header">Our Menu</h1>
<hr />
<h3 className="category">Italian</h3>
{ italianMenu.map((each) => {
return (
<FormCheck className="m-1">
<div className="row justify-content-center">
<div className="col-6">
<FormCheckInput type="checkbox" id="checkbox"/>
<FormCheckLabel className="" >{each.name}</FormCheckLabel>
</div>
<div className="col-2">
<FormCheckLabel className="" >{each.type}</FormCheckLabel>        
</div>
<div className="col-2">
<FormCheckLabel className="" >{each.price}</FormCheckLabel>
</div>
<div className="col-2">
<div className="row">
<div className="col-4"><span name={each.itemId}>-</span></div>
<div className="col-4"><FormCheckLabel className="" >{each.qty}</FormCheckLabel></div>
/********************************************
* NOT UPDATING ABOVE ^^^
********************************************/
<div className="col-4"><span id={each.itemId} onClick={addMore}>+</span></div>
</div>
</div>
</div>
</FormCheck>
)
}) }
</div>
)
}

我想知道出了什么问题。当我单击 PLUS 跨度时，它会重新运行 useEffect，并且也会更改状态，但它不会反映在 html 上

请帮忙。

Answer 1

您正在映射返回语句中的初始状态italianMenu。

我想如果你使用你的状态italian，你的错误就会消失。

{ italian.map((each) => {
return (
<FormCheck className="m-1">
<div className="row justify-content-center">
<div className="col-6">
<FormCheckInput type="checkbox" id="checkbox"/>
<FormCheckLabel className="" >{each.name}</FormCheckLabel>
</div>
<div className="col-2">
<FormCheckLabel className="" >{each.type}</FormCheckLabel>        
</div>
<div className="col-2">
<FormCheckLabel className="" >{each.price}</FormCheckLabel>
</div>
<div className="col-2">
<div className="row">
<div className="col-4"><span name={each.itemId}>-</span></div>
<div className="col-4"><FormCheckLabel className="" >{each.qty}</FormCheckLabel></div>
/********************************************
* NOT UPDATING ABOVE ^^^
********************************************/
<div className="col-4"><span id={each.itemId} onClick={addMore}>+</span></div>
</div>
</div>
</div>
</FormCheck>
)

Answer 2

你应该使用 state(意大利语而不是意大利语菜单(进行映射，如下所示：

{ italian.map((each) => {
return (
<FormCheck className="m-1">
<div className="row justify-content-center">
<div className="col-6">
<FormCheckInput type="checkbox" id="checkbox"/>
<FormCheckLabel className="" >{each.name}</FormCheckLabel>
</div>
<div className="col-2">
<FormCheckLabel className="" >{each.type}</FormCheckLabel>        
</div>
<div className="col-2">
<FormCheckLabel className="" >{each.price}</FormCheckLabel>
</div>
<div className="col-2">
<div className="row">
<div className="col-4"><span name={each.itemId}>-</span></div>
<div className="col-4"><FormCheckLabel className="" >{each.qty}</FormCheckLabel></div>
/********************************************
* NOT UPDATING ABOVE ^^^
********************************************/
<div className="col-4"><span id={each.itemId} onClick={addMore}>+</span></div>
</div>
</div>
</div>
</FormCheck>
)
}) }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>