0

Criei o seguinte componente para selecionar datas no UnForm:

export default function DatePickerInput({ name, ...rest }) {
  const datepickerRef = useRef(null);
  const { fieldName, defaultValue = '', registerField } = useField(name);

  const [date, setDate] = useState(defaultValue || null);
  useEffect(() => {
    registerField({
      name: fieldName,
      ref: datepickerRef.current,
      path: 'props.selected',
    });
  }, [fieldName, registerField]);

  return (
    <Label htmlFor={fieldName}>
      <UnInput>
        <ReactDatePicker
          ref={datepickerRef}
          selected={date}
          onChange={setDate}
          dateFormat="dd/MM/yyyy"
          placeholderText="dd/mm/aaaa"
          writable="true"
          {...rest}
        />
      </UnInput>
    </Label>
  );
}

Para salvar registros o componente está funcionando normalmente, carregando e salvando a data que eu selecionei. Quando vou editar um registro, ao tentar carregar a data no load inicial, a página é quebrada e é exibido o seguinte erro:

Unhandled Rejection (TypeError): Cannot assign to read only property 'selected' of object '#<Object>'

Se eu comento a linha path: 'props.selected', no useEfect() a tela não é quebrada, porém a data não é preenchida no componente. Como fazer para funcionar ?

4

2 Respostas 2

0

Problema :

formRef.current.setFieldValue('birthday',value) isso tentará definir valor no caminho fornecido, no nosso caso, desde que path seja props.selected

E props.selected é uma propriedade somente leitura, portanto você não pode definir valor em props, daí o erro.

useEffect(() => {
    registerField({
      name: fieldName,
      ref: datepickerRef.current,
      path: 'props.selected', // <---- this is props, and it's readonly
      clearValue: (ref) => {
        ref.clear();
      },
    });
}, [fieldName, registerField]);

Solução :

Você pode remover o path e usar os métodosgetter e setter, nomeados comogetValue e setValue:

setValue : para definir o valor inicial ou o que passou de setFieldValue

getValue : para obter valor ao enviar

useEffect(() => {
    registerField({
      name: fieldName,
      ref: datepickerRef.current,
      clearValue: ref => {
        ref.clear();
      },
      setValue: (e, v) => {
        setDate(new Date(v)); // <---- Setting up default value 
      },
      getValue: () => {
        return datepickerRef.current.props.selected; // to get selected value from Date picker's props
        // OR
        return Date.toString(); // to get selected value from state it self
      }
    });
}, [fieldName, registerField]);

DEMO DE TRABALHO :

Edit #SO-Datepicker-unform-setvalue

7
  • Any reason for downvote? Commented 6/06/2020 às 14:43
  • 1
    Because this is the StackOverflow in Portuguese. This community is exclusively for Lusophone users so questions and answers should be asked in Portuguese. If you want to continue communicating in English, you can use StackOverflow EN. Commented 6/06/2020 às 15:42
  • Okay thanks man,for explaining, let me convert it into Portuguese, Commented 6/06/2020 às 15:51
  • Do you need help with that? Commented 6/06/2020 às 15:54
  • @AugustoVasques,I know answer is 100% correct but I think,getting downvotes just for a language, I've tried to convert it, will you please also check if its still understandable or you can update it, thanks for asking. Commented 6/06/2020 às 15:59
-2

writable="true"

No JSX, para inserir um valor booleano, entre outros , deve-se inserí-lo entre chaves ex. writable={true},

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .