Estoy tratando de completar un menú desplegable de lista de selección en un formulario con los resultados de una llamada axios en mi creador de acciones. La llamada llena un (sub)objeto en mi tienda redux, luego se usa para llenar la lista. Funciona bien, pero tengo problemas para obtener el valor del elemento de la lista predeterminado, es decir, el valor del elemento de la lista cuando no se activa el evento onchange.
Por el momento, el atributo de valor controlado por selectedProject parece no tener ningún efecto. IE selectedProject sigue siendo una cadena vacía, pero el primer elemento en la lista de selección es el primero en la tienda redux.
Funciona bien si el usuario hace clic en el menú desplegable y activa onChange, pero habrá muchas circunstancias en las que el usuario seleccione el valor predeterminado. ¿Cómo puedo obtenerlo?
¡Muchas gracias por leer!
Hasta ahora mi código es:
const { projects, newProject } = useSelector((state) => state.project) const [selectedProject, setSelectedProject] = useState('') useEffect(() => { dispatch(getProjects()) }, [dispatch]) const handleNavigate = (e) => { e.preventDefault() navigate(`/project/${selectedProject}`) } return ( <> {projects && ( <> <form onSubmit={handleNavigate}> <select name='projects' id='project-list' onChange={(e) => setSelectedProject(e.target.value)} value={selectedProject} > {projects.map((project) => ( <option key={project._id} value={project.title}> {project.title} </option> ))} </select> <button>Go!</button> </form> </> )} </>)Dado que su entrada de select está siendo controlada por el selectedProject , eso significa, cuál es el valor de ese estado, ese es el valor de la entrada de select . En su caso, el valor inicial del estado es una cadena vacía, y ese es el valor de facto.
Lo que espera es que React seleccione automáticamente el primer elemento de la lista de projects como su primer valor. No es así como funcionan select elementos y reaccionar. Incluso aparte de React, no es así como funcionan las cosas.
La forma correcta de ver esto es confiar siempre en el estado que asignas para la propuesta de value . Aquí está la versión corregida de su código:
const { projects, newProject } = useSelector((state) => state.project); const [selectedProject, setSelectedProject] = useState(''); useEffect(() => { dispatch(getProjects()); }, [dispatch]); useEffect(() => { if(projects && projects.length !== 0 && selectedProject !== '') { setSelectedProject(projects[0].title) } }, [projects]) const handleNavigate = (e) => { e.preventDefault(); navigate(`/project/${selectedProject}`); }; En el código anterior, selectedProject se establece en el primer elemento de la matriz cuando el estado del projects se recupera de redux.