Estoy usando axios para devolver un mapa a mi aplicación principal donde se distribuirá a otros valores en el programa. Sin embargo, estoy teniendo un problema. Cuando uso 'onClick' en una selección desplegable, quiero que llame a esa función externa para devolver la cadena JSON y guardarla en una variable, pero no lo hará. Lo he registrado en la consola y dice que mi variable se usa sin definir. Aquí está mi código axios
import axios from "axios"; // ** when you launch server. Make sure 'express stuff' server is working and that it is posting to 5000/loadCycle function Parent() { let data = null; console.log("called"); const url = "http://localhost:5000/"; axios .get(`${url}loadCycle`) .then((response) => { data = response.data.workflow; data = JSON.stringify(data); data = JSON.parse(data); //console.log(data); const map = new Map(Object.entries(data)); console.log(map); return map; }) .catch((error) => console.error(`Error: ${error}`)); } export default Parent;y aquí está el código que quiero formatear
function App() { let dataCollection = null; return ( <div> <Box sx={{ display: "flex", width: "40%", justifyContent: "space-between" }} > <Box sx={{ display: "flex" }}> {/* <Typography sx={{ paddingTop: "6%" }}>Cycle</Typography> */} {/* Cycle dropdown menu */} {/* // MAKE CHANGES ON BRANCH // */} <FormControl sx={{ m: 1, minWidth: 200 }} size="small" variant="standard" > <InputLabel>Cycles</InputLabel> <Select> <MenuItem value=""> <em>None</em> </MenuItem> <MenuItem value={10} onClick={dataCollection=Parent()}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem> </Select> </FormControl> {/* cycle dropdown menu end */} </Box> </div> )¿Por qué no se selecciona 'uno' de mi colección de datos de actualización seleccionada de 'nulo' al mapa al que estoy tratando de regresar? El registro de la consola muestra que los datos del 'mapa' en Parent son correctos, pero el registro de dataCollection es 'indefinido'
<MenuItem value={10} onClick={dataCollection=Parent()}>Ten</MenuItem>En primer lugar, no definiste la función (intentaste hacerlo como en un js vainilla, pero reaccionar no funciona de esta manera) Entonces, definamos una función separada:
const handleSave = () => { dataCollection=Parent() } // ... <MenuItem value={10} onClick={handleSave}>Ten</MenuItem>El siguiente problema es que su función principal no es sincrónica, debe devolver su promesa de axios y luego usar esta función así:
Parent().then(data => { dataCollection = data; })Eso no es todo, no podemos guardar datos en dataCollection, porque su componente funcional es como una función de procesamiento y perderá sus datos en el próximo procesamiento, por lo que debe guardar sus datos en referencia o estado (dependiendo del propósito de uso) , usemos el estado:
const [dataCollection, setDataCollection] = React.useState(); // ... const handleSave = () => { Parent().then(data => { setDataCollection(data); }) }Además de esto, puedo ver algunos problemas de estilo. Y parece que no ha leído el documento de reacción con atención, lea nuevamente los temas "estado y accesorios" y "ciclo de vida" de los documentos.
Tienes un par de problemas con tu enfoque. No estoy seguro de qué están haciendo los otros componentes: Box , FormControl , InputLabel , Select y MenuItem , por lo que es más difícil discernir si funcionan correctamente. Simplificaría el código y simplemente usaría etiquetas HTML regulares de select y option . La etiqueta de select recibe un evento de change y con React todos los eventos pueden tener el prefijo "on", por lo que sería onChange en la etiqueta de select .
Cree un prototipo, un proyecto más simple, que solo se centre en esa funcionalidad hasta que lo entienda para sus necesidades. Además, practique nombrar construcciones un poco mejor, ya que Parent no transmite lo que está haciendo. Trate de ser sucinto y general.