我有三個復選框,當被選中時會觸發一個功能。我正在使用 React-Bootstrap,我的代碼是這樣的:
let departmentArray = ([]);
function handleCheck(val) {
//DEPARTMENT ARRAY LOAD
const index = departmentArray.indexOf(val);
if (index > -1) {
departmentArray.splice(index, 1);
} else {
departmentArray.push(val);
}
//REACT COMPONENT
if (val === "Maintenance") {
setMaintCheck(!maintCheck);
} else if (val === "Process") {
setProcCheck(!procCheck);
} else if (val === "Toolroom") {
setToolCheck(!toolCheck);
}
};
return (
<>
<Form.Check name={'department'} onClick={(e) => {handleCheck("Maintenance")}} checked={maintCheck} />
<Form.Check name={'department'} onClick={(e) => {handleCheck("Process");}} checked={procCheck} />
<Form.Check name={'department'} onClick={(e) => {handleCheck("Toolroom");}} checked={toolCheck} />
</>
)
復選框的狀態適用于此代碼,但如果存在//REACT COMPONENT下方的代碼,則陣列departmentArray不起作用。如果我洗掉這些行,departmentArray會正確加載。我不知道為什么兩者會相互影響。
uj5u.com熱心網友回復:
departmentArray 似乎是 React 的普通 var,當// REACT COMPONENT執行組件的代碼重新渲染并且 departmentArray 重新初始化為 [] 時。您可以將 departmentArray 作為常量從組件中取出,或者將其宣告為狀態變數,以便組件對其更改做出反應
這就是我的意思:
const departmentArray = []
const component = (props) => {
const loadData = () => {
// get data from somewhere
departmentArray.push(...)
}
return <></>
}
或者您可以將 departmentArray 宣告為狀態變數:
const [departmentArray, setDepartmentArray] = useState([])
const loadDepartments = () => {
// load data
}
useEffect(loadDeparments, [])
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/490666.html
標籤:javascript 反应 数组
上一篇:Javascript反應-使用createSlice并遇到“預期的屬性分配”/“預期的宣告或陳述句”
下一篇:如何從服務器傳輸不同的資料?
