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

【问题标题】：My article state is not returning the proper data?我的文章状态没有返回正确的数据？
【发布时间】：2020-12-19 05:29:40
【问题描述】：

我仍然掌握 react 和 react 钩子的窍门。我正在处理这里发现的这个反应挑战：Link。首次加载代码时，我的文章状态未显示正确的数据。如果您查看控制台日志，我的文章状态会显示一个空数组，然后显示正确的数据，但是当我的代码首次呈现时我需要正确的数据，否则我的代码将无法正确执行。它说我无法映射未定义。我的代码有什么问题？

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;

【问题讨论】：

它是未定义的，因为您的文章在渲染之前等于[]（因此 article.total_pages 是未定义的）。您想将 pgNums 作为一个状态并将其设置在 useEffect 回调中，以便它做正确的事情（并在您将 pgNums 的状态设置为您拥有的任何状态后呈现按钮）。

标签： javascript reactjs api react-hooks

【解决方案1】：

问题是当您尝试访问article 时它不可用。因为asynchronous api 来电。你可以定义另一个状态loading，它在数据获取时显示加载器，或者render ，如果数据不可用，则什么也不做。

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

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>

【讨论】：

【解决方案2】：

每次页面更改您调用 API 时，您都应该使用此条件渲染。而不是 null 你应该返回加载组件/waitIndicator 等

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>
  );
}

【讨论】：