當你在回圈中設定應用程式狀態時，React 似乎不喜歡，所以我很好奇這樣的事情的最佳方法是什么？
我有一些邏輯，我試圖計算input變數大于stat回圈中變數的次數：
const [ statTotal, setStatTotal ] = useState(0);
{
month.events.map((game) => {
return (
<tr key={ game.eventId }>
<td>{ new Date(events[game.eventId].gameDate).toDateString() }</td>
<td>{ events[game.eventId].atVs } { events[game.eventId].opponent.abbreviation }</td>
<td>{ events[game.eventId].gameResult } { events[game.eventId].score }</td>
{
game.stats.map((stat, i) => {
let className = '';
if (input > parseInt(stat)) {
className = 'red';
setStatTotal(statTotal 1);
} else {
className = 'green';
}
return (
<td key={ i } className={ className }>{ stat }</td>
);
})
}
</tr>
);
})
}
有沒有更好的方法來執行邏輯并在應用程式狀態中共享變數？
編輯我已經清理了我的原始語法并添加了更多資訊以增加清晰度。我的資料有點解釋，因為它按月細分，然后是單個游戲日期，然后是該游戲的每個統計資料陣列。
我的輸入是一個選定的統計區域，我試圖捕獲該特定統計高于輸入統計數字的總次數。
uj5u.com熱心網友回復：
是的，有一種驚人的方法可以做到這一點。
const totalStats = game.stats.filter(stat => stat < input).length;
return (
<div>
{
game.stats.map((stat, i) => {
if (stat < input ) {
return <td key={ i } className={"red"}>{ stat }</td>;
} else return <td key={ i } className={"green"}>{ stat }</td>;
}
</div>
)
uj5u.com熱心網友回復：
statTotal 看起來是派生值，不建議為此使用 state。
相反，您可以只使用準備一些用于渲染的資料。
const totalStats = game.stats.filter(stat => input > stat).length
這會將統計資訊過濾為僅通過測驗的統計資訊并對其進行計數。然后，您可以totalStats在 JSX 中的任何地方使用來顯示該值。
如果該串列非常大并且您想提高性能，則可以將其包裝在一個useMemo鉤子中。
const totalStats =
useMemo(() => game.stats.filter(stat => stat < input).length, [game.stats])
現在它只會在game.stats更改時重新計算值。
現在，當您渲染時，您可以大大簡化此回圈，因為您不必進行計數。
return <>
{
game.stats.map(stat => (
<td key={i} className={input > stat ? 'red' : 'green'}>{ stat }</td>
))
}
</>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/396970.html
標籤：反应