即使單擊按鈕，sum變數也會更改為29.98，但是盡管我使用的是useEffect鉤子，并且我已經添加了依賴項 as [sum]，因此如果 num 的值發生變化let sum = 0，當我單擊按鈕時，總和現在變為 29.98，因此重新渲染應該發生，我現在應該在 UI 上看到更新的值，但它仍然顯示為 0，我認為組件不會重新渲染。為什么？
import React, { useEffect } from 'react';
import './SelectEx1.css'
const SelectEx1 = (props) => {
let data = [
{
id: 1,
title: "Milk",
price: 15.99,
},
{
id: 2,
title: "Bread",
price: 13.99,
},
];
let sum = 0;
useEffect(()=>{}, [sum]);
const handleClick = () => {
console.log(data);
data.map((item) => {
sum = (sum item.price)
});
}
return (
<div>
<p>hello, {sum}</p>
<button onClick={handleClick}>click-me</button>
</div>
)
}
export default SelectEx1;
uj5u.com熱心網友回復：
我想你想要的是
const [sum, setSum] = useState(0);
...
const handleClick = () => {
console.log(data);
const total = data.reduce((a, b) => a b, 0);
setSum(total);
}
因此，這handleClick將觸發狀態更改，從而觸發重新渲染。把sum進入的依存串列useEffect僅僅觸發了功能（第一個引數）useEffect時sum被改變。由于第一個引數是一個空函式，它在sum改變時什么都不做。
uj5u.com熱心網友回復：
與其定義sum為變數，不如讓它成為狀態。因為狀態更新會觸發重新渲染。并呼叫setSum內部handleClick函式來更改 statesum的值，這將導致重新渲染，您將在 UI 上看到更新后的值：
import React, { useEffect } from 'react';
import './SelectEx1.css'
const data = [
{
id: 1,
title: "Milk",
price: 15.99,
},
{
id: 2,
title: "Bread",
price: 13.99,
},
];
const SelectEx1 = (props) => {
const [sum, setSum] = React.useState(0)
const handleClick = () => {
const total = data?.reduce(function (previousValue, currentValue) {
return previousValue currentValue.price
}, 0)
setSum(total)
}
return (
<div>
<p>hello, {sum}</p>
<button onClick={handleClick}>click-me</button>
</div>
)
}
export default SelectEx1;
uj5u.com熱心網友回復：
你并不需要useEffect，把sum在useState和變化onClick如下圖所示：
const [sum,setSum] = useState(0);
const handleClick = () => {
const reducer = (previousValue, currentValue) => previousValue
currentValue.price;
setSum(data.reduce(reducer,0))
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/393349.html
標籤：javascript 反应 反应原生 反应钩子