反应 |为什么输入的 defaultValue 没有被更新？

Question

我有一个调用 CEP 承诺的有状态组件，用于从邮局获取数据。当 Zip 输入用 9 个字符（8 个数字和一个“-”）完成时获取此数据，并返回一个包含所需信息的对象。

功能如下：

  const handleZipCode = useCallback(
    async ({ target }: ChangeEvent<HTMLInputElement>) => {
      const { value } = target;

      try {
        if (value.length === 9 && isDigit(value[8])) {
          const zip = await cep(value);

          if (zip?.city) {
            setZipData(zip);
          } else
            addressFormRef.current?.setErrors({
              user_zip_code: 'CEP not found',
            });
        }
      } catch (e) {
        addressFormRef.current?.setErrors({
          user_zip_code: e.message ?? 'CEP not found',
        });
      }
    },
    [isDigit]
  );

然后，在返回时我有一些字段，例如：

            <fieldset>
              <legend>Address</legend>
              <Input
                mask=''
                name='user_address'
                placeholder='Rua um dois três'
                defaultValue={zipData.street}
              />
            </fieldset>

这是输入组件：

const Input: React.FC<InputProps> = ({ name, ...rest }) => {
  const { fieldName, defaultValue, registerField, error } = useField(name);
  const inputRef = useRef(null);

  useEffect(() => {
    registerField({
      name: fieldName,
      ref: inputRef.current,
      path: 'value',
      // eslint-disable-next-line
      setValue(ref: any, value: string) {
        ref.setInputValue(value);
      },
      // eslint-disable-next-line
      clearValue(ref: any) {
        ref.setInputValue('');
      },
    });
  }, [fieldName, registerField]);

  return (
    <Container>
      <ReactInputMask ref={inputRef} defaultValue={defaultValue} {...rest} />
      {error && <Error>{error}</Error>}
    </Container>
  );
};

然而 zipData 似乎已更新，但未满足默认值。我做错了什么？

Answer 1

默认值不会改变，因为unform是一个不受控制的表单库，默认值会在页面第一次渲染时设置，然后就不会再改变了。

要解决您的问题，您可以执行以下操作：

// on your handleZipCode function
formRef.current.setData({
   zipData: {
     street: zipResult.street,
   },
});