我正在用 React Typescript 構建一個應用程式，并且我的狀態定義如下：
const [products, setProducts] = useState({
fruits: [],
veggies: [],
herbs: [],
});
當我想從一個產品中添加一個產品時HTML select，比如說一個水果，我將在onChange函式中呼叫以下內容：
addProduct("fruits", value);
函式addProduct如下所示。我productType用作訪問特定產品型別的密鑰products：
const addProduct = (productType: string, value: string) => {
setProducts((products) => ({
...products,
[productType]: [...products.productType, value],
}));
}
但是，我收到此錯誤（螢屏截圖附加到鏈接）：
TS2339: Property 'productType' does not exist on type '{ fruits: never[]; 蔬菜：從不[]；草藥：從不[]；}'。在哪里...products.productType突出顯示。
我嘗試...products.productType使用美元符號識別符號、模板文字進行訪問，但無濟于事。我怎樣才能訪問...products.productType？是否有正確的語法可以使用，或者是否有解決方案？
編輯：感謝您對定義型別的建議，我會考慮到這一點。但是，我認為這是根本問題：
"TS2339: Property 'productType' does not exist on type 'IState'".
如果我嘗試訪問...products.productType，它不會讓我因為在我的狀態productType中不存在。products如何讓它搜索字串文字（在本例中為"fruits"）？
uj5u.com熱心網友回復：
我會建議保留 3 種不同的狀態，而不是只使用一種。這將更加靈活且易于使用和理解（對于您和其他開發人員接觸您的代碼）。
如果您仍然想這樣做，那么發生在您身上的是 typescript 是inferring來自您的初始值的型別，它們是空陣列 = never[]。要解決此問題，您應該鍵入您的狀態，例如：
interface IState {
fruits: string[], // use whatever value it should be, I'm just guessing its a string
veggies: string[],
herbs: string[],
}
const [products, setProducts] = useState<IState>({
fruits: [],
veggies: [],
herbs: [],
});
const addProduct = (productType: keyof IState, value: string) => {
setProducts((products) => ({
...products,
[productType]: [...products[productType], value],
}));
}
編輯：請注意，還有 2 個錯誤
producType不應該是字串型別，而是一個鍵IState- 如果您使用點符號訪問物件，則 TS 期望該物件具有該確切鍵。相反，您應該使用括號表示法。
uj5u.com熱心網友回復：
你的代碼有一些問題，比如提到的@super，你也需要修復這些問題。至于您遇到問題的原因是因為您試圖productType使用products.productType.
您嘗試訪問的屬性不存在導致問題并給您錯誤。
要訪問舊狀態值以在值陣列中連接，請更改您的代碼，如下所示，
setProducts((products) => ({
...products,
[productType]: [...products[productType], value],
}));
這應該可以解決您的問題。
編輯
在更改代碼以包含狀態物件的型別之后，@toni 的答案給出了所需的更改。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/491215.html
標籤：javascript 反应 打字稿