Реагировать на глобальное состояние, заставляя флажки не работать - PullRequest
Новая
       33

Реагировать на глобальное состояние, заставляя флажки не работать

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

ОК, я не знаю, сколько кто-нибудь сможет мне помочь, потому что я не могу воспроизвести эту ошибку в CodeSandbox. Но я уже целый день бьюсь об этом, и мне нужна помощь!

У меня есть приложение React с:

  • глобальным состоянием, не Redux, а просто с использованием useContext () и useReducer ().
  • формы с контролируемыми входами флажков

Иногда, когда я нажимаю флажки, чтобы переключать их, они вызывают повторную визуализацию компонента, что делает их go обратно к их значению по умолчанию. После МНОГО тестирования я вывел проблему из-за того, получает ли компонент формы или какой-либо из его компонентов-предков доступ к глобальному состоянию Store. Если у меня есть доступ к глобальному состоянию, флажки вызывают повторные визуализации. Если у меня нет доступа к глобальному состоянию, они не имеют. Неважно, если я использую глобальное состояние для чего-либо или нет.

Я пытался использовать ванильный React и response-hook-form для управления флажками, с тем же Результаты. Я еще не пробовал использовать Formik; это быстро приближается к следующей вещи, которую я собираюсь попробовать, но я бы действительно хотел бы на самом деле понять и исправить проблему, а не найти стороннее решение.

Я интересно, должно ли это быть проблемой дублирования пространства имен между флажками и моим глобальным состоянием? Вот свойства глобального объекта состояния, когда я переименовываю sh приложение и go непосредственно в форму проблематики c: 

curChangesMade
dieRollMode
editPrivilege
initialMount
mainNavMenuOpen
rollQueue
rollsToDisplay
shouldUpdateCharacterCache
toggleCharEditing
uploadRoll
userSettingsMenuOpen
activeCampaigns
editCharFct
keyShortcutsFct
blockShortcutKeysFct
user

Делаются ли какие-либо из этих имен свойств похожими на ванильные флажки будет доступ?

Вот базовый c код проблемной формы c, хотя он менялся так много раз (с одинаковыми результатами), что я не уверен, насколько полезной будет эта конкретная версия . 

import React, { useState, useContext } from 'react';

import { Store } from '../GlobalWrapper';

const Build = (props) => {
    const [state] = useContext(Store);

    const [inputs, setInputs] = useState({});
    const handleChange = ev => {
      ev.persist();
      const value =
        ev.target.type === "checkbox" ? ev.target.checked : ev.target.value;
      console.log(value);
      setInputs(inputs => ({
        ...inputs,
        [ev.target.id]: value
      }));
    };

    const processKitForm = (ev) => {
        ev.preventDefault();
        alert(JSON.stringify(inputs));
    }

    return (
        <form onSubmit={processKitForm} className="build-library">
            <h1>Form</h1>
            <div>
                <label htmlFor="name">Name</label>
                <input
                    type="text"
                    id="name"
                    onChange={handleChange}
                    value={inputs.name || ""}
                />
            </div>
            <div>
                <ul>
                    <li className="checkbox-pair">
                        <input
                            type="checkbox"
                            id={`checkbox_A`}
                            onChange={handleChange}
                            checked={!!inputs[`checkbox_A`]}
                        />
                        <label>A</label>
                    </li>
                </ul>
            </div>
            <button type="submit">Save</button>
        </form>
    );
  }

export default Build;

Опять же, если я просто закомментирую строку 

const [state] = useContext(Store);

, то флажок работает нормально. В противном случае это сломано. Глобальное состояние отлично работает в остальной части приложения.

...