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、再び設定されfalse、counts配列がゼロで再初期化されます。その後、すべてが正常に機能しています。
私は何が欠けていますか?