Javascript 我的文章状态没有返回正确的数据？

我仍然掌握着react和react钩子的窍门。我正在进行以下react挑战：。我的文章状态在代码首次加载时未显示正确的数据。如果您查看控制台日志，我的文章状态显示一个空数组，然后是正确的数据，但是当我的代码第一次呈现时，我需要正确的数据，否则我的代码将无法正确执行。它说我不能映射未定义的。我的代码怎么了

import React, {useState, useEffect} from 'react';


const Articles = () => {
const [article, setArticle] = useState([])
const [page, setPage] = useState(1)
 useEffect(() => {
    fetch(`https://jsonmock.hackerrank.com/api/articles?page=${page}`)
    .then(res => res.json())
    .then(data => setArticle(data))
 }, [page])
 const pgNums = Array(article.total_pages).fill().map((_, i) => i + 1)
 console.log(article)
    return (
      <React.Fragment>
        <div className="pagination">
         {pgNums.map(n => <button data-testid="page-button" key={n} onClick={() => setPage(n)}>{n}</button>)}
        </div>
        <ul className="results">
    {/* {article.data.map(article => <li key="title-1" data-testid="result-row">{article.title}</li>)} */}
        </ul>
      </React.Fragment>
    );
}

export default Articles;

import React，{useState，useffect}来自“React”；
常量文章=（）=>{
const[article，setArticle]=useState（[]）
const[page，setPage]=useState（1）
useffect（（）=>{
取回(`https://jsonmock.hackerrank.com/api/articles?page=${page}`）
.then（res=>res.json（））
.然后（数据=>setArticle（数据））
}，[第页]）
const pgNums=Array（article.total_pages）.fill（）.map（（u，i）=>i+1）
console.log（文章）
返回(
{pgNums.map（n=>setPage（n）}>{n}}

{/*{article.data.map（article=>
{article.title}
）}*/}

);
}
出口违约物品；

当您试图访问

文章时，问题是它不可用。因为
异步api
调用。您可以定义另一个状态
加载
，当数据正在提取时显示加载程序，或者
呈现
如果数据不可用，则什么也不显示

在您的情况下，您可以这样做：

if(!article) return null; <- It means data is not available do not show anything
    return (
      <React.Fragment>
        <div className="pagination">
         {pgNums.map(n => <button data-testid="page-button" key={n} onClick={() => setPage(n)}>{n}</button>)}
        </div>
        <ul className="results">
    {/* {article.data.map(article => <li key="title-1" data-testid="result-row">{article.title}</li>)} */}
        </ul>
      </React.Fragment>

如果（！article）返回null；setPage（n）}>{n}}

{/*{article.data.map（article=>
{article.title}
）}*/}

每次调用API时更改页面时，都应该使用此条件呈现。您应该返回loading component/waitIndicator等，而不是null

const Articles = () => {
  const [article, setArticle] = useState([])
  const [page, setPage] = useState(1)
  const [pgNums, setPageNums] = useState([])

  useEffect(() => {
    fetch(`https://jsonmock.hackerrank.com/api/articles?page=${page}`)
      .then(res => res.json())
      .then(data => {
        console.log(data.data);
        setArticle(data.data)
        setPageNums(Array(data.total_pages).fill().map((_, i) => i + 1))
      }

      )
  }, [page])

  return (
    <React.Fragment>
      <div className="pagination">
        {pgNums.length > 0 ? pgNums.map(n => <button data-testid="page-button" key={n} onClick={() => setPage(n)}>{n}</button>) : null}
      </div>
      <ul className="results">
        {article.length > 0 ? article.map((article,i) => <li key={i} data-tes.tid="result-row">{article.title}</li>) : null}
      </ul>
    </React.Fragment>
  );
}

const Articles=（）=>{
const[article，setArticle]=useState（[]）
const[page，setPage]=useState（1）
const[pgNums，setPageNums]=useState（[]
useffect（（）=>{
取回(`https://jsonmock.hackerrank.com/api/articles?page=${page}`）
.then（res=>res.json（））
。然后（数据=>{
console.log（data.data）；
setArticle（data.data）
setPageNums（数组（data.total_pages.fill（）.map（（u，i）=>i+1））
}
)
}，[第页]）
返回(
{pgNums.length>0？pgNums.map（n=>setPage（n）}>{n}）：null}

{article.length>0？article.map（（article，i）=>
{article.title}
）：null}

);
}
它是未定义的，因为您的文章在呈现之前等于
[]
（因此article.total\u页面未定义）。您希望将pgNums设置为一个状态，并在useffect回调上设置它，以便它执行正确的操作（并在将pgNums的状态设置为所有状态后渲染按钮）。