解決方案：我將鉤子更改為：
const [flagC, setFlagC] = useState(props.cars[i].state===on? 'green' : 'red');
和功能：
const onOff=()=>{debugger;
if(props.cars[i].state===on){
setFlagC('red');
props.cars[i].state=off;
}
else if(props.cars[i].state===off){
setFlagC('green');
props.cars[i].state=on;
}
}
我的 app.js 中有一個陣列，里面有汽車，每輛車都有開/關狀態：
let cars=[{name: 'mazda', state: off},{name:'toyota', state:off},{name: 'volvo', state:off}];
現在我有一個組件可以接收這個陣列并在不同的按鈕中顯示每輛車（在 app.js 中使用地圖）：
{cars.map((val,i)=>{
return <ComponentName carName={val.name} index={i}/>
})}
我在組件內部創建了一個帶有紅色的鉤子：
const[flagC,setFlagC]=useState('red');
和一個應該檢查汽車狀態的功能，如果它關閉，則將按鈕背景顏色設定為紅色，以及它的開啟是否為綠色 將狀態設定為“開啟”。它改變了汽車的顏色，但是當我傳遞到應用程式上的另一個頁面時，它將它設定回紅色，但狀態仍然存在。我需要改變什么？
繼承人的功能：
const[flagC,setFlagC]=useState('red');
const onOff=()=>{debugger;
if(props.cars[i].state===on){
props.cars[i].state=off;
setFlagC('red');
}
if(props.cars[i].state===off){
props.cars[i].state=on;
setFlagC('green');
}
}
該值通過索引獲得正確的汽車，鉤子是按鈕的樣式 按鈕具有onClick。
<button style={{backgroundColor: flagC}} onClick={onOff}>{props.carName}</button>
uj5u.com熱心網友回復：
加載組件時，您不會更新顏色狀態。我建議如下：
const [color, setColor] = useState(props.cars[i].state===on ? 'green' : 'red')
解釋：每次組件掛載時，它都會使用狀態的初始值，直到您根據傳入的資料（道具與否）更新狀態。如果資料以道具的形式出現，那么您可以在呼叫 useState 時將狀態定義為具有初始值，如果資料來自函式呼叫或異步或 redux 更改，則您必須使用它useEffect來更新您的狀態。
由于您的資料似乎是您可以撰寫的道具useState(props match condiction ? valueOne: valueTwo)
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/488502.html
標籤：javascript 数组 反应 功能 钩