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 ?
writable="true"
com o valortrue
sem as aspas:writable=true
? Já vi plugins que tratam"true"
(entre aspas) como string etrue
(sem aspas) como booleano e causa diferenciação e comportamento incorreto quando é string.import
's para alguém poder tentar reproduzir. Parece que está usando oreact-datepicker
, mas nem isso posso afirmar, já que ele não tem uma propwritable
.