0

formikベースのステップ ウィザード内にコンポーネントがあります。

useField以下のように、useEffectおよびフックを使用useStateします。

const [counts, countsMeta, countsHelpers] = useField('counts');
const [visible, setVisible] = useState(false);
useEffect(() => {
  countsHelpers.setValue(
    Array(event.book && event.book.length ? event.book.length : 0).fill(0)
  );
  // eslint-disable-next-line
}, [event.book]);

私は、決して変わらないuseEffect限り、何があっても一度だけ呼び出されるべきであることを理解しています。event.book

以下のようにクーポンを適用する方法もあります。

        <div className={styles.coupon}>
          <FontAwesomeIcon
            icon={faPlusSquare}
            onClick={() => setVisible(!visible)}
          />{' '}
          coupon code
          {visible && (
            <div>
              <input
                id='coupon'
                type='text'
                value={values.coupon || ''}
                onChange={onChange}
                placeholder='Coupon code'
                className={errors.coupon ? styles.error : ''}
              />
              <div
                className={styles.apply}
                onClick={() => loadPromo(values.coupon)}
              >
                Apply
              </div>
            </div>
          )}
        </div>

なんらかの理由でloadPromo()、コンポーネントを再初期化すると特定できません。それが発生すると、状態とフィールドがリセットされます。たとえばvisible、再び設定されfalsecounts配列がゼロで再初期化されます。その後、すべてが正常に機能しています。

私は何が欠けていますか?

4

0 に答える 0