[英]How to change one of the state object value correctly with useState React
[英]How can I change only one value in a React useState that contains an object and assign a different one to the rest?
我有以下狀態:
const [clickColumn, setClickColumn] = useState({
name: 0,
tasks: 0,
partner: 0,
riskFactor: 0,
legalForm: 0,
foundationYear: 0
})
現在,例如,我只想將 name 設置為 2,其余設置為 1。但我不想這樣寫: setClickColumn({ name: 2, tasks: 1, riskFactor: 1, partner: 1, legalForm: 1, foundationYear: 1 });
我怎樣才能讓它更短?
您可以使用擴展運算符使其變得簡單:
setClickColumn({ ...clickColumn, name: 2 });
它傳播現有對象 clickColumn 並添加名稱:2,覆蓋默認值。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
縮短它並不一定會使它更簡單,但您可以執行以下操作:
const obj = { name: 0, tasks: 0, partner: 0, riskFactor: 0, legalForm: 0, foundationYear: 0 }; const entries = Object.entries(obj).map(([key, value]) => key === 'name' ? [key, 2] : [key, 1]); const result = Object.fromEntries(entries); console.log(result);
您可以輕松創建一個函數,通過解析對象並給出正確的值來為您重置狀態:
const getResetClickColumn = (clickColumn) => { Object.keys(clickColumn).forEach(key => { const value = (key === 'name' ? 2 : 1); clickColumn[key] = value; }) return clickColumn; } const reset = getResetClickColumn({ name: 0, tasks: 0, partner: 0, riskFactor: 0, legalForm: 0, foundationYear: 0 }) console.log(reset)
除了@MorKadosh 的回答:
setClickColumn(Object.fromEntries(Object.entries(clickColumn)
.map(([key, value]) => [key, key === 'name' ? 2 : 1])))
您可以簡單地制作一個臨時變量
let tmpColumn = clickColumn;
tmpColumn.name = 2;
// other changes
setClickColumn(tmpColumn);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.