TypeError: props.articles.map不是reactjs中的函数

Question

我有我的app.js文件，iam从我的app.js文件中的后端REST中获取数据，在此之后，iam将数据发送到子组件ArticleList.js，最初的页面是我的Login.js页面，添加用户名和密码来访问文章列表，但是在登录iam接收TypeError后的第一次，props.articles.map不是一个函数，但是当我刷新页面时没有错误，我的意思是在第一次尝试iam看到错误时，但是当我刷新页面时，iam没有看到这个错误。

App.js

import './App.css';
import {useState, useEffect} from 'react'
import ArticleList from './components/ArticleList';
import ArticleDetails from './components/ArticleDetails'
import AddArticle from './components/AddArticle'
import {Route, Switch,BrowserRouter, useNavigate, Routes } from 'react-router-dom';
import Login from './components/Login'
import NavBar from './components/NavBar';



function App() {

  const [articles, setArticles] = useState([])

  //const navigate = useNavigate();

  const token = localStorage.getItem('mytoken')

  let navigate = useNavigate()

  useEffect(() => {
   
    fetch('https://testrest22.herokuapp.com/articles/', {
      method:'GET',
      headers:{
        'Content-Type':'application/json',
        'Authorization':`Token ${token}`
      }
    })
    .then(resp => resp.json())
    .then(resp => setArticles(resp))
    .catch(error => console.log(error))

   

  }, [token])


  useEffect(() => {
    if(!token) {
   
        navigate('/')
    }

}, [])

  const insertedArticle = (article) => {
    const new_articles = [...articles, article]
    setArticles(new_articles)
  }
  
 
return (

<>

<NavBar/>

<Routes>

    <Route path = "/" element = {<Login/>}></Route>

    <Route path   = "/articles"  element = {
       <div  className = "container mt-3"> 
       <ArticleList articles = {articles}/>
      </div>
       }>
     </Route>

   
     <Route path  = "/articles/:slug" element = {
        <ArticleDetails/>
      }>
    </Route>


    <Route path = "/add" element = {
        <AddArticle insertedArticle = {insertedArticle}/>
      }>
    </Route> 

</Routes>
   
               
</>
  );
}

export default App;

ArticleList.js

import React from 'react'
import {Link} from 'react-router-dom'


function ArticleList(props) {

    return (
        <div>
            {props.articles && props.articles.map(article => {
                
        return(
            <div className = "mt-4" key = {article.slug}>
            <span className="badge rounded-pill bg-success">Author: {article.author}</span>
            <h2><Link to = {`/articles/${article.slug}`} className = "link-style" >{article.title}</Link></h2>
      
            <hr/>

        </div>
        )
      })}
        </div>
    )
}

export default ArticleList

Answer 1

试试这个：

{props?.articles[0] && props?.articles?.map(article => {
...