Значения Formik не обновляются в зависимости от состояния - PullRequest
Новая
       13

Значения Formik не обновляются в зависимости от состояния

1 голос
/ 22 мая 2019

Вот шаблон формы, которую я пишу с Formik и response-bootstrap.Я нахожу очень странную ошибку: если я инициализирую свое состояние с помощью фиктивных данных в конструкторе, он работает нормально;но если я вызываю setState с точно такими же данными в componentDidMount, чтобы имитировать вызов 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(){
        // 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;

Я не понимаю

  1. Почему код работает, когда я устанавливаю свои фиктивные данные в конструкторе, а не в componentDidMount
  2. Почему values.alertVehicles не синхронизируется с alertVehicles.

Заранее спасибо за любую помощь.

1 Ответ

2 голосов
/ 22 мая 2019

По какой-то причине это поведение Formik по умолчанию, и вам необходимо предоставить реквизит enableReinitialize для его переопределения: https://github.com/jaredpalmer/formik/issues/811

...