我正在尝试创建一个组件列表,其中每个组件都接受用户输入并具有单独的状态。 然后我希望能够过滤此列表并获取例如“switch”为 true 的组件。我已经尝试了很多事情,但似乎我无法弄清楚如何做到这一点。最后我这样做了:
我的父组件
export const Parking = () => {
const [position, setPosition] = useState([false,false,false])
const onBayClick = (index) => {
position[index-1] === false? setPosition([...position.slice(0, index) , true, ...position.slice(index + 1)]):setPosition([...position, false])
}
const myBays = []
for (let i = 1; i < 4; i++) {
myBays.push(<BayForm key = {i} child = {i} state = {position[i]} onClick = {onBayClick}/>)
}
const [filteredBays, setFilteredBays] = useState(myBays)
const filterBays = () => {
setFilteredBays(myBays.filter(bay => {
return bay.position === false
}))
}
return (
<>
{myBays}
</>
)
}
我的子组件。我只发布相关部分,因为它太长了。
const handleClick = () => {
onClick(index)
}
<FormGroup>
<FormControlLabel control={<Switch checked = {state} onChange = {handleClick} color = 'warning'/>} label="Switch" />
</FormGroup>
但是当我尝试轻按开关时,出现以下错误:
“警告:组件正在将不受控制的输入更改为受控制。这可能是由于值从未定义更改为已定义值导致的,这种情况不应该发生。在组件的生命周期内决定使用受控或不受控制的输入元素更多信息:https://reactjs.org/link/control-components%s”
这样做的正确方法是什么?无论我尝试什么,我都会遇到错误。
嗯,我怀疑你确实将未定义的值从
Parking
传递到了Switch
,就在这里:
for (let i = 1; i < 4; i++) {
myBays.push(<BayForm key = {i} child = {i} state = {position[i]} onClick = {onBayClick}/>)
}
您的填充数组
position[i]
有 3 个值,因此有效索引为 0、1 和 2。
所以将其设置为:
for (let i = 0; i < position.length; i++)
如果您需要在
BayForm
中渲染此索引,只需将 1
添加到其中
另请参阅此处的问题:
const onBayClick = (index) => {
position[index-1] === false
? setPosition([...position.slice(0, index) , true, ...position.slice(index + 1)])
: setPosition([...position, false])
}
这行
setPosition([...position, false])
的意思是获取现有数组,复制它并与false组合,这会导致数组每次都会增长。
为了以不可变的方式更改数组中的一个值,我建议使用 map 函数:
const onBayClick = (bayIndex) => {
setPosition(previousPositions => previousPositions.map((it, index) => { // iterating through the array
if (index === bayIndex) { // if the clicked index matches this one we iterate
return !it // just set it's opposite value
}
return it // otherwise keep it as it is
}))
}