我一直在努力寻找一种方法,这样当我点击一个按钮时,数组中的下一部电影就会出现在屏幕上.我是新手,所以请原谅我的代码.我想我的问题在于我从外部网站获取数据的方式.我不确定我应该如何/何时加载数据以使其最有效地发挥作用.如有任何帮助或提示,我们将不胜感激

function App() {
  const [items,setItems] = useState([]);

  async function getItems() {
    const response = await fetch('https://etbd.tech/nuspljr_334360/csv2json.php');
    const data = await response.json();
    setItems([...data]);
  }

  useEffect(() => {
    getItems();
  },[]);

  async function loadData() {
    const response = await fetch('https://etbd.tech/nuspljr_334360/sread.php?f=imdb_top_1000.csv');
    const menu = await response.json();
    setItems([...menu]);
  }

  useEffect(() => {
    loadData();
  },[]);

  function Buttons() {
    return (
      <div>
        <button className="button" onClick={nextMovie}>Next Movie</button>
      </div>
    )
  }

  function RenderItem() {
    return (
      <div>
        {items.map((item) => (
          <div key={v4()} className='card'>
            <section className="description">
              <img src={item.Poster_Link} alt="Poster_Image"/>
              <section className="title">
                <p>{item.Series_Title} ({item.Released_Year})</p>
                <p>IMDB Rating: {item.IMDB_Rating}</p>
              </section>                
              <p>{item.Overview}</p>
              <p>{item.Genre} - {item.Runtime}</p>
            </section>
          </div>  
        ))}

      </div>


    )};   

  return (
    <div className="body">
      <h2>Guess that Movie</h2>
      <div className="table">
        <RenderItem />
        <div className="nav">
          <Buttons />
        </div>
      </div>
    </div>  
  );   
}

export default App; 

推荐答案

好的,你的代码中遗漏了一些东西. 首先,您引用的是NextMovie函数,但没有声明它.

在此之后,您应该考虑组件的逻辑以及它应该如何行为.

您确实有一个用于存储您正在获取的项目的状态. 现在,您需要另一种状态来存储某种逻辑,以显示当前电影,并在单击下一电影按钮时使用下一电影按钮更新此状态.

可以设置一个const[activeIndex,setActiveIndex]=useState(-1);

当您第一次获取项目时,可以将MovieIndex设置为0.

在组件呈现项中,您将go 掉items.map;因为您不想在数组中循环,所以只想显示一个.

我们现在将活动电影作为props 传递给RenderItem组件并显示活动电影数据.

我建议您在try 使用Reaction代码之前,先了解更多关于Java脚本的知识.

你可以在这里看到一个有效的演示:https://codesandbox.io/s/optimistic-sid-8morgf?file=/src/App.js

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

function App() {
  const [items,setItems] = useState([]);
  const [activeIndex,setActiveIndex] = useState(-1);

  async function getItems() {
    const response = await fetch('https://etbd.tech/nuspljr_334360/csv2json.php');
    const data = await response.json();
    
    setActiveIndex(0);
    setItems([...data]);

  }

  useEffect(() => {
    getItems();
  },[]);

  function Buttons() {
    return (
      <div>
        <button className="button" onClick={nextMovie}>Next Movie - next index {activeIndex + 1}</button>
      </div>
    )
  }

  function RenderItem({item}) {
    return (
      <div>
          <div className='card'>
            <section className="description">
              <img src={item.Poster_Link} alt="Poster_Image" />
              <section className="title">
                <p>{item.Series_Title} ({item.Released_Year})</p>
                <p>IMDB Rating: {item.IMDB_Rating}</p>
              </section>                
              <p>{item.Overview}</p>
              <p>{item.Genre} - {item.Runtime}</p>
            </section>
          </div>  
      </div>
    )};   

    const nextMovie = () => setActiveIndex((prev) => prev + 1);

  return (
    <div className="body">
      <h2>Guess that Movie</h2>
      <div className="table">
      {items.length === 0 ? 'Loading...' : (<>
        <RenderItem item={items[activeIndex]} />
        <div className="nav">
          <Buttons />
        </div>
      </>)}
      </div>
    </div>  
  );   
}

export default App; 

Javascript相关问答推荐

我们如何从一个行动中分派行动

如何在coCos2d-x中更正此错误

更改预请求脚本中重用的JSON主体变量- Postman

如何使用TypeScrip设置唯一属性?

不同表的条件API端点Reaction-redux

如何在Java脚本中对数据进行签名,并在PHP中验证签名?

postman 预请求中的hmac/sha256内标识-从js示例转换

我的NavLink活动类在REACT-ROUTER-V6中出现问题

在Java脚本中构建接口的对象

递增/递减按钮React.js/Redux

有角粘桌盒阴影

Firebase函数中的FireStore WHERE子句无法执行

将字符串解释为数字;将其重新编码为另一个基数

使用VITE开发服务器处理错误

验证Java脚本函数中的两个变量

将promise列表拆分到组.按组并行和顺序执行所有promise

需要将源自AJAX的数据添加到表中

我怎样才能同步两个Java脚本函数呢?

react setState不保留以前的状态

如何在Xbox中撤销令牌