Tengo un elemento con una lista anidada de elementos. Puedo editar estos elementos anidados individualmente usando un <SimpleFormIterator> combinado con un <FormDataConsumer> . El problema es que cuando inserto un nuevo elemento en la lista, se convierte en el último elemento. Me gustaría que fuera el primero y cambiar todos los demás elementos por una ranura.
Tal vez algo como usar una costumbre con una devolución de llamada addOnTop podría ayudar? Pero no veo una manera de hacer que funcione sin reescribir todo el componente desde cero.
<SimpleFormIterator addButton={<ListAddButton onClick={addOnTop??} />} removeButton={<ListRemoveButton />} > ... </SimpleFormIterator>Tal vez intente con unshift(). Aquí está el enlace: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift
Al final creo que logré solucionar haciendo algo como esto:
const form = useForm(); const getData = useCallback(() => { const emptyArticle = { URL: "", title: "", image: "", eyelet: "", topic: "", }; const { articles } = form.getState().values; if (!articles) return [emptyArticle]; articles.pop(); articles.unshift(emptyArticle); return articles; }, [form]); <SimpleFormIterator addButton={ <ListAddButton onClick={() => form.change("articles", getData())} /> } removeButton={<ListRemoveButton />} TransitionProps={{ enter: false, exit: false, addEndListener: () => {}, }} > <SimpleFormIterator/>No estoy seguro de que sea el mejor enfoque, pero parece funcionar, aunque actualmente hay un error con este componente que fuerza el uso de "emptyArticle" en lugar de simplemente presionar "undefined" .