Cuando hago el POST Request todos los datos se envían bien pero luego cuando quiero traer los datos en el campo de la fecha releaseData
este tiene como valor undefined
.
App.js
import React, { useState, useEffect, useCallback } from 'react';
import AddMovie from './components/AddMovie';
import MoviesList from './components/MoviesList';
import './App.css';
function App() {
const [movies, setMovies] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
// Factorizar estas 2 funciones:
const fetchMoviesHandler = useCallback(async () => {
setIsLoading(true);
setError(null);
try {
const response = await fetch(
'https://fir-movie-app-2761f-default-rtdb.firebaseio.com/movies.json'
);
if (!response.ok) {
throw new Error('Something went wrong ' + response.status);
}
const data = await response.json();
console.log(data);
const loadedMovies = [];
for (const key in data) {
loadedMovies.push({
id: key,
title: data[key].title,
openingText: data[key].openingText,
releaseData: data[key].releaseData,
});
}
console.log(loadedMovies);
setMovies(loadedMovies);
} catch (error) {
setError(error.message);
}
setIsLoading(false);
}, []);
useEffect(() => {
fetchMoviesHandler();
}, [fetchMoviesHandler]);
const addMovieHandler = async movie => {
try {
const response = await fetch(
'https://fir-movie-app-2761f-default-rtdb.firebaseio.com/movies.json',
{
method: 'POST',
body: JSON.stringify(movie),
headers: {
'Content-Type': 'application/json',
},
}
);
if (!response.ok) {
throw new Error('Something went wrong ' + response.status);
}
const data = await response.json();
console.log(data);
} catch (error) {
setError(error.message);
}
};
let content = <p>Movie Not Found.</p>;
if (movies.length > 0) {
content = <MoviesList movies={movies} />;
}
if (error) {
content = <p>{error}</p>;
}
if (isLoading) {
content = <p>Loading...</p>;
}
return (
<React.Fragment>
<section>
<AddMovie onAddMovie={addMovieHandler} />
</section>
<section>
<button onClick={fetchMoviesHandler}>Fetch Movies</button>
</section>
<section>{content}</section>
</React.Fragment>
);
}
export default App;