我怎樣才能在 react 中創建一個被 "監視 "的輸入元素陣列，而不會因為在 FunctionComponent 體外使用 useState 而引發錯誤？
如果我有以下的情況（未經測驗，簡化的例子）：
interface Foo {
val: string;
setVal: React.Dispatch<React.SetStateAction<string> > 。
}
function MyReactFunction（） {
const [allVals, setAllVals] = useState<Foo[]> ([])
const addVal = () => {
const [val, setVal] = useState(' ')
setAllVals(allVals.concat({val, setVal})
}
return (
<input type="button" value="Add input" onClick={addVal}>
allVals.map(v => <li><輸入值={v.val} onChange={(_e,newVal) => v.setVal(newVal)}></li> )
)
}
我將得到一個錯誤鉤子只能在一個函陣列件的主體內呼叫。
我如何在上述代碼中使用FunctionComponents動態地添加 "watched "元素？
編輯
我意識到為上述每個<li>單獨的組件能夠解決這個問題，但是我試圖與Microsoft Fluent UI集成，因此我只有onRenderItemColumn鉤可以使用，而不是能夠為每個串列項或行創建一個單獨的組件。
編輯 2
回應Drew Reese的評論：抱歉，我是react的新手，對Vue更熟悉，所以我顯然使用了錯誤的術語（watch、ref、reactive等）。我將如何重寫我提供的代碼示例，以便有：
添加按鈕allVals.map(v => v.val)uj5u.com熱心網友回復：
const [val, setVal] = useState('')是不允許的。相等的效果只是將值設定為allVals中的一個特定索引。
假設你是在為一個特定的索引設定值。
假設你只是在allVals中添加新的專案（而不是從其中洗掉），下面的解決方案將發揮作用。這個簡單的片段只是向你展示了基本的想法，你需要根據你的使用情況進行調整。
function MyReactFunction(/span>) {
const [allVals, setAllVals] = useState<Foo[]> ([])
const addVal = () => {
setAllVals(allVals => {
//`i`將是新添加專案的固定索引。
//它被捕獲在封閉中，永遠不會改變。
const i = allVals.length。
const setVal = (v) => setAllVals(span class="hljs-params">allVals => {
const head = allVals.slice(0, i)
const target = allVals[i] 。
const tail = allVals.slice(i 1)
const nextTarget = { ...目標，val: v }
return head.concat（nextTarget）.concat（tail）)
})
return allVals.concat（{
val: ''/span>,
setVal,
})
})
}
return (
< input type="button" value="Add input" onClick={addVal} />
{allVals.map(v =>
<li><input value={v。 val} onChange={(_e,newVal) => v.setVal(newVal)}></li>
)}
)
uj5u.com熱心網友回復：
反應鉤子不能在回呼中被呼叫，因為這違反了鉤子規則。
根據我的理解，你想點擊按鈕并動態地添加輸入，然后能夠更新每個輸入。你可以在addVal回呼中向allVals陣列添加一個新元素，只需使用功能狀態更新將一個新元素追加到allVals陣列的末尾并回傳一個新的陣列參考。同樣，在updateVal回呼中，使用功能狀態更新將之前的狀態陣列映射到一個新的陣列參考，使用索引來匹配你想要更新的元素。
interface Foo {
val: string;
}
function MyReactFunction(/span>) {
const [allVals, setAllVals] = useState<Foo[]>（[]）。
const addVal = (/span>) => {
setAllVals((allVals) => allVals。 concat({ val: " })。
};
const updateVal = (index: number) => (e: any) => /span> {
setAllVals((allVals) =>/span>
allVals.map((el, i) =>
i === index
? {
...el。
val: e.target.val.
}
: el
)
);
};
return (
<>/span>
< input type="button" value="Add input" onClick={addVal} />
{allVals.map((v, i) => (
<li key={i}>
<input value={v. val} onChange={updateVal(i)} />
</li>
))}
</>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/332280.html
標籤：
上一篇：0和1的中心矩陣