从fetch api对象问题中使用随机返回的项目播放

发布于 2025-01-19 04:56:52 字数 1271 浏览 1 评论 0原文

在我被击中可能的重复标签之前，请听我说。

我有代码

 const [value, setValue] = useState();
 const [data, setData] = useState();

  const handleChange = (e) => {
    setValue(e.target.value);
  };


  const handleClick = () => {
    const options = {
      method: 'GET',
      headers: {
        'X-RapidAPI-Host': 'advanced-movie-search.p.rapidapi.com',
        'X-RapidAPI-Key': 'myKeyHere'
      }
    };
    
    fetch(`https://advanced-movie-search.p.rapidapi.com/discover/movie? 
       with_genres=${value}&page=18`, options)
      .then(response => response.json())
      .then(response => {
        let res = response
        setData(res)
        console.log(res)
      })  
      .catch(err => console.error(err));
  };

// then returning this here like this.

    <div className="card">
        <h2>{data?.results?.[Math.floor(Math.random() * data.results.length)].title}</h2>
        <p>{data?.results?.[Math.floor(Math.random() * data.results.length)].overview}</p>
      </div>

，您可以在这里看到一个API，该API返回20个项目的数组，然后每次单击按钮时随机选择一个API。正如您可以从p标签中分辨出的那样，它运行相同的随机选择，这也将从数组中的20个对象中的任何一个中汲取随机的“概述”。

我要想到的是标题在H2中随机拉出，那么我称之为的所有其他数据将仅来自该对象。

我认为将要接听它的对象并将其保存到一个状态，然后用状态调用。

提前致谢！

原文

Before I'm hit with a possible duplicate tag hear me out.

I have the code

 const [value, setValue] = useState();
 const [data, setData] = useState();

  const handleChange = (e) => {
    setValue(e.target.value);
  };


  const handleClick = () => {
    const options = {
      method: 'GET',
      headers: {
        'X-RapidAPI-Host': 'advanced-movie-search.p.rapidapi.com',
        'X-RapidAPI-Key': 'myKeyHere'
      }
    };
    
    fetch(`https://advanced-movie-search.p.rapidapi.com/discover/movie? 
       with_genres=${value}&page=18`, options)
      .then(response => response.json())
      .then(response => {
        let res = response
        setData(res)
        console.log(res)
      })  
      .catch(err => console.error(err));
  };

// then returning this here like this.

    <div className="card">
        <h2>{data?.results?.[Math.floor(Math.random() * data.results.length)].title}</h2>
        <p>{data?.results?.[Math.floor(Math.random() * data.results.length)].overview}</p>
      </div>

as you can see here I'm calling an api which returns an array of 20 items then randomly selecting one every time the button is clicked. as you can probably tell from the p tag which is running the same random selection this too will pull a random "overview" from any of the 20 objects from the array.

What I'm trying to is once the title is pulled randomly in the h2 then all other data I call will come from only that object.

What I thought would would is to take the object that gets called and save it to a state then call it with state.overview or whatever I have no idea if that will work or how to even do it though.

Thanks in advance!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

对岸观火 2025-01-26 04:56:52

这是我的解决方案：

将API调用移至使用效率，而无需依赖项即可在MOUT上运行（完全可选）
创建一个新状态以存储一个随机号码，请说currentresult
在每个按钮单击时，生成一个随机数一个将其保存到currentResult使用setCurrentResult
重构渲染模板以使用data？results？[currentResult] ...

  const [value, setValue] = useState();
  const [data, setData] = useState();
  const [currentResult, setCurrentResult] = useState(null);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const handleClick = () => {
    // Fetch if you want

    setCurrentResult(Math.floor(Math.random() * data.results.length))
  };

// then returning this here like this.

{currentResult && (
  <div className="card">
    <h2>{data?.results?.[currentResult].title}</h2>
    <p>{data?.results?.[currentResult].overview}</p>
  </div>
)}

Here is my solution:

move the api call to an useEffect without dependencies to run only on mount (completely optional)
create a new state to store a random number, let's say currentResult
on every button click, generate a random number an save it into currentResult using setCurrentResult
refactor the render template to use data?.results?[currentResult]...

  const [value, setValue] = useState();
  const [data, setData] = useState();
  const [currentResult, setCurrentResult] = useState(null);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const handleClick = () => {
    // Fetch if you want

    setCurrentResult(Math.floor(Math.random() * data.results.length))
  };

// then returning this here like this.

{currentResult && (
  <div className="card">
    <h2>{data?.results?.[currentResult].title}</h2>
    <p>{data?.results?.[currentResult].overview}</p>
  </div>
)}

回复收藏 0 原文

~没有更多了~