reactjs - 组件在道具更新时重新初始化

Question

我有一个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]);

我知道 myuseEffect应该只被调用一次，无论如何只要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用零重新初始化数组。之后，一切正常。

我错过了什么？

标签： reactjsreduxreact-reduxformik