Formik的值不随状态更新

17 浏览
0 Comments

Formik的值不随状态更新

下面是我使用Formik和react-bootstrap编写的表单模板。我遇到了一个非常奇怪的错误：如果我在构造函数中使用虚拟数据初始化我的状态，它可以正常工作；但是如果我在componentDidMount中调用setState并使用完全相同的数据来模拟API调用，它会出现严重的错误。

具体来说，我发现状态变量alertVehicles数组的长度可以为非零，但相应的Formik值变量values.alertVehicles可能为空。目前，按照当前的表单编写方式，不会渲染复选框。如果在我的守卫子句中使用alertVehicles而不是values.alertVehicles，那么它将出现错误Cannot read property 'selected' of undefined。

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(){
        // 这将最终成为一个API调用
        // 如果在构造函数中初始化，则一切正常！
        this.setState( {
            alertRecipient: {
                name: 'Rob',
                simNumber: '0123456789',
            },
            alertId: 1,
            alertVehicles: [
                {id: 1, vrn: '车辆A', selected: true },
                {id: 2, vrn: '车辆B', selected: false },
                {id: 3, vrn: '车辆C', selected: true }
            ]
        })
    }
    
    render() {
        const { alertRecipient, alertId, alertVehicles } = this.state;
        return (
            <>
                 {
                            window.alert(JSON.stringify(values))
                        }
                    }
                    render={({values, handleChange, handleSubmit}) => (
                        

                            名称
                            
                            电话号码
                            
                            
                            车辆
                            {
                                // 在这里使用alertVehicles.length会出错吗？？
                                values.alertVehicles.length === 0 ? null : alertVehicles.map((veh, index) => (
                                    
                                ))
                            }
                            
                        
                    )
                    }
                />
            
        )
    }
}
export default Alerts;

我不明白以下几点：

1. 为什么在构造函数中设置虚拟数据时代码可以工作，但在componentDidMount中不行？

2. 为什么values.alertVehicles似乎与alertVehicles不同步。

提前感谢您的帮助。

0