我有這個貓鼬模式
const storeSchema = mongoose.Schema({
name: {
type: String,
required: true,
},
fruits: {
type: [String],
required: true,
},
});
在我的客戶端，我正在為名稱輸入執行此操作，并且到目前為止它正在作業。
const [store, setStoreData] = useState({
store: '',
fruits: [''],
});
const dispatch = useDispatch();
const handleSubmit = (e) => {
e.preventDefault();
dispatch(addStore(store));
};
...
<TextField
label='Store Name'
variant='outlined'
value={store.name}
onChange={(e) =>
setStoreData({
...store,
name: e.target.value,
})
}
/>
我試圖模仿這種行為，但我認為它必須更復雜。問題是我想為每個水果選擇 2 或 3 個這樣的“輸入選擇”。每個都有多個 int 選擇，如 1、2、3。根據目標值，將水果數量推入水果陣列。這就是我所擁有的。
<Select
value={store.fruits}
label='Fruits'
onChange={(e) =>
setStoreData({
...store,
fruits: e.target.value,
})
}>
<MenuItem value={1}>1</MenuItem>
<MenuItem value={2}>2</MenuItem>
<MenuItem value={3}>3</MenuItem>
</Select>
所以理想情況下，我會有 3 個這樣的輸入，一個用于香蕉和蘋果等水果，客戶選擇的數字是香蕉將插入陣列的條目數。
示例：一個選擇說我有 3 個（數字 3）香蕉。我會進入資料庫。
{
"name": store
"fruits": ["banana", "banana", "banana"]
}
我正在使用@mui/material 進行反應。
uj5u.com熱心網友回復：
一個好的解決方案可能是將您的狀態結構更改為對輸入更友好的結構，然后在提交時將此值轉換為與您的商店模式匹配的值。
您的狀態宣告可能看起來像這樣；
const [store, setStoreData] = useState({
name: "",
fruits: {
apple: 0,
banana: 0,
orange: 0
},
});
然后，您可以使用共享方法來更新您所在州的水果值。
const handleChangeFruit = (name, value) => {
setStoreData(store => ({
...store,
fruits: {
...store.fruits,
[name]: value
}
}));
}
然后你的水果Select輸入變成：
<Select
value={store.fruits.apple}
label='apple'
onChange={(e) =>
handleChangeFruit('apple', parseInt(e.target.value))
}>
<MenuItem value={1}>1</MenuItem>
<MenuItem value={2}>2</MenuItem>
<MenuItem value={3}>3</MenuItem>
</Select>
要將此狀態轉換為您的模式形狀，您可以執行以下操作；
const getStoreData = () => {
const fruits = Object.entries(store.fruits).reduce(
(acc, cur) => acc.concat(new Array(cur[1]).fill(cur[0])),
[]
);
return {
name: store.name,
fruits,
};
};
您的handleSubmit方法現在變為：
const handleSubmit = (e) => {
e.preventDefault();
dispatch(addStore(getStoreData()));
};
這應該可以解決問題。
To get extra smart points, you can even generate the Select fields dynamically like so:
Object.keys(store.fruits).map((fruit) => (
<Select
key={fruit}
value={store.fruits[fruit]}
label={fruit}
onChange={(e) => handleChangeFruit(fruit, parseInt(e.target.value))}
>
<MenuItem value={1}>1</MenuItem>
<MenuItem value={2}>2</MenuItem>
<MenuItem value={3}>3</MenuItem>
</Select>
));
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/440594.html
標籤：javascript 反应 mongodb 猫鼬