Флажки Formik, сгенерированные из al oop и API, работают неправильно - PullRequest
Новая
       6

Флажки Formik, сгенерированные из al oop и API, работают неправильно

0 голосов
/ 21 апреля 2020

У меня есть компонент реагирования, который получает данные из API и создает из него группу входов для флажков, используя Formik.

Я пытаюсь сделать это динамически, как это: 

const TraineeList = () => {

const [data, setData] = useState([]);

useEffect(() => {

    const fetchData = async () => {
        const result = await axios(
            'https://localhost:44376/api/robots',
        );
        setData(result.data);
    };
    fetchData();
}, []);

return (
    <>
        {data.map((item, index) => (
            <label key={index}>
                <Field
                    key={index}
                    type="checkbox"
                    name="worldRobots"
                    value={item.id}
                />
                {item.name}
            </label>
        ))}
            </>

);

Это создает группу флажков, но при установке или снятии флажка анимация отсутствует.

Однако, когда я создаю группу флажков вручную, например, это работает: 

return (
    <>      
        <label>
            <Field type="checkbox" name="worldRobots" value="1" />
            All
        </label>
        <label>
            <Field type="checkbox" name="worldRobots" value="2" />
            Military
        </label>
        <label>
            <Field type="checkbox" name="worldRobots" value="3" />
            Environmental
        </label>
        <label>
            <Field type="checkbox" name="worldRobots" value="4" />
            Industrial
        </label>
    </>
);

Для обоих результат HTML выглядит следующим образом: 

<label>
    <input type="checkbox" name="worldRobots" value="1"> All
</label>
<label>
    <input type="checkbox" name="worldRobots" value="2"> Military
</label>
<label>
    <input type="checkbox" name="worldRobots" value="3"> Environmental
</label>
<label>
    <input type="checkbox" name="worldRobots" value="4"> Industrial
</label>

Оба метода генерируют одно и то же, когда я смотрю на источник HTML. Оба метода также сохраняются в правильном состоянии.

Разница лишь в том, что флажки, созданные с помощью первого метода, не имеют интерактивной анимации. Например, вы не видите, чтобы флажок появлялся или исчезал из маленького флажка.

Я также заметил, что свойство 'checked' никогда не появляется в HTML в первом методе, но появляется во втором.

Это просто странно, потому что они оба сохраняют в состояние.

Может ли быть какая-то причина, по которой первый метод действует так?

Спасибо!

...