这是我使用Formik和react-bootstrap编写表格的模板。我发现一个非常奇怪的错误:如果我在构造函数中使用虚拟数据初始化我的状态,则可以正常工作;但是如果我在componentDidMount中调用setState并使用完全相同的数据来模拟API调用,则会出现严重错误。
具体来说,我发现状态变量alertVehicles数组可能具有非零长度,但相应的Formik values.alertVehicles变量可能为空。目前,编写的表单不呈现复选框。如果我在守卫子句中使用alertVehicles而不是values.alertVehicles,则会出现错误“无法读取未定义的属性‘selected’”。
具体来说,我发现状态变量alertVehicles数组可能具有非零长度,但相应的Formik values.alertVehicles变量可能为空。目前,编写的表单不呈现复选框。如果我在守卫子句中使用alertVehicles而不是values.alertVehicles,则会出现错误“无法读取未定义的属性‘selected’”。
import React, {Component} from 'react';
import Form from 'react-bootstrap/Form';
import { Formik } from 'formik';
import Button from 'react-bootstrap/Button';
class Alerts extends Component {
constructor(props) {
super(props);
this.loadAlertData = this.loadAlertData.bind(this);
this.state = {
alertRecipient: {},
alertId: '',
alertVehicles: []
}
}
componentDidMount(){
this.loadAlertData();
}
loadAlertData(){
// this will be an API call eventually, obviously.
// if this is initialised in the constructor then everything works!
this.setState( {
alertRecipient: {
name: 'Rob',
simNumber: '0123456789',
},
alertId: 1,
alertVehicles: [
{id: 1, vrn: 'vehicle A', selected: true },
{id: 2, vrn: 'vehicle B', selected: false },
{id: 3, vrn: 'vehicle C', selected: true }
]
})
}
render() {
const { alertRecipient, alertId, alertVehicles } = this.state;
return (
<>
<Formik
initialValues={{ alertRecipient, alertId, alertVehicles }}
onSubmit={ values => {
window.alert(JSON.stringify(values))
}
}
render={({values, handleChange, handleSubmit}) => (
<Form onSubmit={handleSubmit}>
<Form.Label>Name</Form.Label>
<Form.Control
type="text"
name="alertRecipient.name"
value={values.alertRecipient.name}
onChange={handleChange}
/>
<Form.Label>Phone number</Form.Label>
<Form.Control
type="text"
name="alertRecipient.simNumber"
value={values.alertRecipient.simNumber}
onChange={handleChange}
>
</Form.Control>
<Form.Label>Vehicles</Form.Label>
{
//get an error if we just use alertVehicles.length here??
values.alertVehicles.length === 0 ? null : alertVehicles.map((veh, index) => (
<Form.Check type="checkbox"
key={veh.id}
label={veh.vrn}
name={`alertVehicles[${index}].selected`}
checked={values.alertVehicles[index].selected}
onChange={ handleChange }
/>
))
}
<Button type="submit">Save</Button>
</Form>
)
}
/>
</>
)
}
}
export default Alerts;
我不理解
- 为什么当我在构造函数中设置虚拟数据时代码可以正常运行,但在
componentDidMount
中却不行。 - 为什么
values.alertVehicles
似乎与alertVehicles
不同步。
感谢您提前的帮助。
Formik
中,只有在enableReinitialize=true
之后才能正常工作。 - Mohd Qasim