Estoy creando esta sencilla aplicación de noticias con dotnet webapi y reacciono. Quiero obtener las noticias de mi backend. La API funciona bien, la he probado, pero de alguna manera mi useEffect no se ejecuta y no puedo obtener los datos. ¿Qué estoy haciendo mal y cuál es la forma correcta de hacerlo? ¡Cualquier ayuda será apreciada!
Aquí está mi app.js donde debería estar funcionando la búsqueda.
import './App.css';
import axios from 'axios';
import ArticleList from './/components/ArticleList.jsx';
function App() {
const [articles, setArticles] = useState(null)
useEffect(() => {
console.log('If it works, this should be shown!')
axios.get('https://localhost:7112/News').then(response => {
setArticles(response.data)
console.log(articles)
});
},[]);
return (
<div className="App">
<ArticleList articles={articles}/>
</div>
);
}
export default App;
import ArticleListItem from './ArticleListItem.jsx'
export default function ArticleList(articles) {
return (
<>
{articles && articles.map(article => (<ArticleListItem key={article.title} article={article} />
))}
</>
)
}
Está el componente que arroja el error:articles.map no es una función.
El error no proviene de useEffect ni del componente de la App . Pero ArticleList en sí mismo cuando pasa articles como props al componente ArticleList y antes de mapearlo, primero debe verificar si tiene artículos:
Puede hacer algo como esto:
{props.articles && props.articles.map(...)
Debe verificar los artículos para renderizar Loading o ArticleList
{articles && <ArticleList articles={articles}/>}
o establece el valor inicial para el estado de los artículos:
const [articles, setArticles] = useState([])