我可以只渲染我的页面一次。刷新页面后，我收到一条错误消息，因为无法从 api 中找到数据。请让我知道我的错误

Question

我用useEffect调用api来获取数据。数据包含 10 个数组集。在 section = container 中，我将所需数据提取到特定部分（通过 css 完成布局）。我只能获取一次数据，刷新后，错误显示“找不到数据”。请让我知道我的错误

function App() {
    
      const [posts, setPosts] = useState([])
      const url = 'https://api.tvmaze.com/search/shows?q=all';
    
      useEffect(() => {
        fetch(url).then(resp => resp.json())    //api call
          .then(resp => setPosts(resp))
      }, []);
    
    
      return (
        <div class="App">
          
          <header class="App-header">
            <h1>WELCOME TO ZENERSPACE CINEMAS!!</h1>
          </header>
        
          {console.log(posts)}
         
          <div class="container-fluid">
            <section id="container">
    
              <div>
                <img src={myImg1} alt="" />   // fetching data from api call
                <a href={posts[0].show.url}>{`${posts[0].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto"><Link to="/Home">Show more details</Link></button>
              </div>
              <div>
                <img src={myImg2} alt="" />
                <a href={posts[1].show.url}>{`${posts[1].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
              <div>
                <img src={myImg3} alt="" />
                <a href={posts[2].show.url}>{`${posts[2].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto"
                > Show more details
                </button>
              </div>
              <div>
                <img src={myImg4} alt="" />
                <a href={posts[3].show.url}>{`${posts[3].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
              <div>
                <img src={myImg5} alt="" />
                <a href={posts[4].show.url}>{`${posts[4].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
              <div>
                <img src={myImg6} alt="" />
                <a href={posts[5].show.url}>{`${posts[5].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
              <div>
                <img src={myImg7} alt="" />
                <a href={posts[6].show.url}>{`${posts[6].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
              <div>
                <img src={myImg8} alt="" />
                <a href={posts[7].show.url}>{`${posts[7].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
              <div>
                <img src={myImg9} alt="" />
                <a href={posts[8].show.url}>{`${posts[8].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
              <div>
                <img src={myImg10} alt="" />
                <a href={posts[9].show.url}>{`${posts[9].show.name}`} </a>
                <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
            </section>
    
          </div>
    
          <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossOrigin="anonymous"></script>
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossOrigin="anonymous"></script>
    
        </div>
    
      );
    }
    
    export default App;

Answer 1

给你：

一些东西：使用 .map( ) 函数肯定比使用数组索引来访问项目更好 one-by-one，加上更少的代码和干净的代码。

import React, { useEffect, useState } from "react"

function App() {

  const [posts, setPosts] = useState([])

  useEffect(() => {
    const fetchData = () => {
      fetch("https://api.tvmaze.com/search/shows?q=all")
        .then(res => res.json())
        .then(json => {
          setPosts(json)
        })
    }
    fetchData()
  }, []);


  return (
    <div className="App">

      <header className="App-header">
        <h1>WELCOME TO ZENERSPACE CINEMAS!!</h1>
      </header>

      <div className="container-fluid">
        <section id="container">
          {
            posts.map(ele => (
              <div key={ele.show.id}>
                <a href={ele.show.url}>{`${ele.show.name}`}</a>
                <button type="button" className="btn btn-danger btn-md mx-auto">Show more details</button>
              </div>
            ))
          }
        </section>

      </div>
    </div>

  );
}

export default App;

Screenshot-Page:

Screenshot-Network

Answer 2

如果您在刷新页面时遇到错误，这可能对您有所帮助：每次您发出 API 请求时，都需要一些时间来检索数据，并且当您的应用程序尝试访问仍然为空的帖子状态时，反应流错误表示您正在尝试访问未定义的数据，以解决它允许您的应用在不是空数组时访问帖子。

{posts.length>0&& <section id="container">.....</section>}

使用您的代码：

函数应用程序() {

  const [posts, setPosts] = useState([])
  const url = 'https://api.tvmaze.com/search/shows?q=all';

  useEffect(() => {
    fetch(url).then(resp => resp.json())    //api call
      .then(resp => setPosts(resp))
  }, []);


  return (
    <div class="App">
      
      <header class="App-header">
        <h1>WELCOME TO ZENERSPACE CINEMAS!!</h1>
      </header>
     
      <div class="container-fluid">
        {posts.length>0&&
        <section id="container">

          <div>
            <img src={myImg1} alt="" />   // fetching data from api call
            <a href={posts[0].show.url}>{`${posts[0].show.name}`} </a>
            <button type="button" class="btn btn-danger btn-md mx-auto"><Link to="/Home">Show more details</Link></button>
          </div>
          <div>
            <img src={myImg2} alt="" />
            <a href={posts[1].show.url}>{`${posts[1].show.name}`} </a>
            <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
          </div>
          <div>
            <img src={myImg3} alt="" />
            <a href={posts[2].show.url}>{`${posts[2].show.name}`} </a>
            <button type="button" class="btn btn-danger btn-md mx-auto"
            > Show more details
            </button>
          </div>
          <div>
            <img src={myImg4} alt="" />
            <a href={posts[3].show.url}>{`${posts[3].show.name}`} </a>
            <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
          </div>
          <div>
            <img src={myImg5} alt="" />
            <a href={posts[4].show.url}>{`${posts[4].show.name}`} </a>
            <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
          </div>
          <div>
            <img src={myImg6} alt="" />
            <a href={posts[5].show.url}>{`${posts[5].show.name}`} </a>
            <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
          </div>
          <div>
            <img src={myImg7} alt="" />
            <a href={posts[6].show.url}>{`${posts[6].show.name}`} </a>
            <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
          </div>
          <div>
            <img src={myImg8} alt="" />
            <a href={posts[7].show.url}>{`${posts[7].show.name}`} </a>
            <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
          </div>
          <div>
            <img src={myImg9} alt="" />
            <a href={posts[8].show.url}>{`${posts[8].show.name}`} </a>
            <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
          </div>
          <div>
            <img src={myImg10} alt="" />
            <a href={posts[9].show.url}>{`${posts[9].show.name}`} </a>
            <button type="button" class="btn btn-danger btn-md mx-auto">Show more details</button>
          </div>
        </section>
        }
      </div>

      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossOrigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossOrigin="anonymous"></script>

    </div>

  );
}

export default App;

如果你想在 jsx 中控制日志发布数据，还记得在评估数据存在的条件后记录它

我可以只渲染我的页面一次。刷新页面后，我收到一条错误消息，因为无法从 api 中找到数据。请让我知道我的错误

I can render my page just once. After refreshing the page, i am getting an error as cant find data from api. Please let me know my mistake

javascript

render

reactjs