Tengo problemas para usar useReducer con entrada. Estoy tratando de usar una entrada controlada aquí, pero sigo recibiendo errores; La entrada controlada no está controlada
importar React, {useReducer, useEffect} desde "react";
importar axios desde "axios";
const estadoinicial = {
post: {}, user: ""} const reducer = (estado, acción) => {
switch(action.type){ case "Fetch_data": return { post: action.payload } case "On_change": return { user: action.payload } case "Fetch_error": return { post: {} } default: return state }} const ReducerFetchdata = () => {
const [info, dispatch] = useReducer(reducer, initialState) useEffect(()=>{ axios .get(`https://jsonplaceholder.typicode.com/posts/${info.user}`) .then (res => { console.log(res) dispatch({type: "Fetch_data", payload: res.data}) }) .catch(err => { console.log(err) dispatch({type: "Fetch_error"}) }) }, [info.user]) const handleChange = (event) =>{ dispatch({type: "On_change", payload: event.target.value}) } return( <div> <input type="text" onChange={handleChange} value={info.user}/> <p>{info.post.title}</p> </div> )}
exportar ReducerFetchdata predeterminado
Solo una suposición: está eliminando su clave de user después de buscar su publicación, por lo que info.user se vuelve indefinido.
Su reductor debe ser:
switch(action.type) { case 'Fetch_data': return { ...state, post: action.payload } ... }Siempre regresa
{ ...state [someKey]: someValue } en su On_Change y Fetch_error también.
Debe difundir todo el estado y luego actualizar la clave necesaria cuando regrese del reductor. En este caso onChange llamó On_change cuya acción no devolvió post desde el estado del reducer y, por lo tanto, causó un error.
Consulte: Sandbox para la solución