英文:
TypeError: .map is not a function when submit a form
问题
我有一个问题，我正在尝试创建一个选择表单，在这个表单中，选择一个选项应该将对象中的布尔值从available: true切换为false。我认为我的解决方案很有前途，但我收到了错误消息。
import { useState } from 'react';
function App() {
const [time, setTime] = useState("");
const [availableSlots, setAvailableSlots] = useState([
{ value: '17:00', available: true },
{ value: '18:00', available: true },
{ value: '19:00', available: true },
{ value: '20:00', available: true },
{ value: '21:00', available: true },
{ value: '22:00', available: true }
]);
const toggleAv = () => {
var selectedSlot = availableSlots.find((item) => {
return item.value === time;
});
setAvailableSlots(
...availableSlots,
selectedSlot.available = false
);
console.log(availableSlots);
};
const handleSubmit = (e) => {
e.preventDefault();
toggleAv();
}
return (
<>
<form onSubmit={handleSubmit}>
<select
name="time"
id="time"
value={time}
onChange={(e) => setTime(e.target.value)}
>
{availableSlots.map((item, key) => {
return <option key={key} value={item.value}>{item.value}</option>;
})}
</select>
<input type="submit" value="Submit" />
</form>
</>
);
}
export default App;
代码在应该的情况下运行正常，只是在提交时出现错误。我应该使用其他方法替代find吗？我不明白为什么不能像这样使用.filter方法...
英文:
I have a problem I am trying to make a select form where the selection of an option suppose to toggle boolean value in an object from available: true to false. I think my solution is quite promising but I am getting error
import { useState } from 'react'
function App() {
const [time, setTime] = useState("")
const [availableSlots, setAvailableSlots] = useState([
{value: '17:00', available: true},
{value: '18:00', available: true},
{value: '19:00', available: true},
{value: '20:00', available: true},
{value: '21:00', available: true},
{value: '22:00', available: true}
])
const toggleAv = () => {
var selectedSlot = availableSlots.find((item) => {
return item.value === time
})
setAvailableSlots(
...availableSlots,
selectedSlot.available = false
)
console.log(availableSlots)
}
const handleSubmit = (e) => {
e.preventDefault();
toggleAv()
}
return (
<>
<form onSubmit={handleSubmit}>
<select
name="time"
id="time"
value={time}
onChange={(e) => setTime(e.target.value)}
>
{availableSlots.map((item, key) => {
return <option key={key} value={item.value}>{item.value}</option>
})}
</select>
<input type="submit" value="Submit" />
</form>
</>
)
}
export default App
Code works how it should, it just gives error when submitted. Should I use something else instead of find then? I don't see any reason why I couldn't use the .filter method like that...
答案1
得分: 2
这是包含解决方案的 codesandbox 存储库。我只是创建了一个具有更新的“available”属性的新插槽数组，然后将该新数组传递给了setAvailableSlots()，而不是展开现有的availableSlots数组。
这是更新后的函数：
const toggleAv = () => {
const updatedSlots = availableSlots.map((slot) =>
slot.value === time ? { ...slot, available: false } : slot
);
setAvailableSlots(updatedSlots);
console.log(updatedSlots);
};
英文:
here is codesandbox repo with the solution. I just created a new array of slots with the updated "available" properties and then passed that new array to the setAvailableSlots() instead of spreading the existing availableSlots array.
here is updated function
const toggleAv = () => {
const updatedSlots = availableSlots.map((slot) =>
slot.value === time ? { ...slot, available: false } : slot
);
setAvailableSlots(updatedSlots);
console.log(updatedSlots);
};
答案2
得分: 0
使用一个for循环，在匹配到索引的时间时更新数值。你正在尝试使用的是扩展运算符。它会保留先前的值并添加一个不是对象类型的额外项。因此，它不会使用.map()函数。
const toggleAv = () => {
for (var i = 0; i < availableSlots.length; i++) {
if (availableSlots[i].value === time) {
availableSlots[i].available = false;
}
}
};
英文:
Use a for loop where it matches the time at index it will update the value. The code you are trying it is a spread operator. It will keep previous values and add one more item which is not a object kind. So it is not taking the .map() function.
const toggleAv = () => {
for (var i = 0; i < availableSlots.length; i++) {
if (availableSlots[i].value === time) {
availableSlots[i].available = false;
}
}
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论