es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo establecer el estado inicial de useReducer utilizando la respuesta de la API?

19 Jul, 2023 Programación

Soy nuevo en React y estoy tratando de construir una aplicación con una función de carrito donde los usuarios pueden agregar robots al carrito. Estoy utilizando el “Context API” para proporcionar el carrito en toda la aplicación y “useReducer” para los estados. Los robots se recuperan de un servidor y se cargan correctamente. Pero no puedo encontrar una forma de establecer el estado inicial del “reducer” utilizando los productos recuperados. El estado siempre devuelve una matriz vacía para los robots. ¿Cómo puedo resolver esto?

const CartProvider = ({ children }) => {
    const [robots, setRobots] = useState([]);

    useEffect(() => {
        fetch('http://localhost:8000/api/robots')
            .then(res => res.json())
            .then(data => setRobots(data?.data))
    }, [])

    const initialState = {
        robots: [...robots],
        cart: []
    }
    const [state, dispatch] = useReducer(cartReducer, initialState);

    return (
        <cartcontext.provider value="{{" state,="" dispatch="" }}="">
            {children}
        </cartcontext.provider>
    );
}

export default CartProvider;
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el código anterior es que se está estableciendo initialState antes de que los robots se obtengan del servidor utilizando el método fetch(). Como fetch() es asíncrono, el estado inicial se establece como una matriz vacía para los robots.

    Para resolver esto, necesitamos esperar a que se obtengan los robots antes de establecer el estado inicial. Podemos lograr esto estableciendo el estado inicial en el gancho useEffect, donde obtenemos los datos de los robots. Así es como podemos actualizar el código:

    const CartProvider = ({ children }) => {
  const [robots, setRobots] = useState([]);

  useEffect(() => {
    fetch('http://localhost:8000/api/robots')
      .then(res => res.json())
      .then(data => {
        setRobots(data?.data); // establecer datos de robots una vez obtenidos
        const initialState = {
          robots: data?.data || [], // actualizar initialState con datos de robots obtenidos
          cart: []
        };
        dispatch({ type: "INITIALIZE_CART", payload: initialState }); // enviar estado inicial al reductor
      });
  }, []);

  const [state, dispatch] = useReducer(cartReducer, {});

  return (
    <cartcontext.provider value="{{" state,="" dispatch="" }}="">
      {children}
    </cartcontext.provider>
  );
};
export default CartProvider;

    Aquí, estamos estableciendo initialState dentro del gancho useEffect después de obtener los datos de los robots. Estamos enviando initialState al reductor utilizando el método dispatch().

    Tenga en cuenta que estamos inicializando el parámetro state para useReducer con un objeto vacío {}. Esto se debe a que el método dispatch() debe llamarse después de que se establezca initialState.

Comments are closed.