处理从 fetch api object 问题中随机返回的项目

Question

在遇到可能重复的标签之前，请听我说完。

我有密码

 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，其中 returns 一个包含 20 个项目的数组，然后每次单击按钮时随机选择一个。正如您可能从 p 标签中看出的那样，这是运行相同的随机选择，这也会从数组中的 20 个 object 中的任何一个中提取随机“概览”。

我想做的是，一旦标题在 h2 中被随机拉出，那么我调用的所有其他数据将仅来自 object。

我想的是获取被调用的 object 并将其保存到一个状态，然后用 state.overview 或任何我不知道这是否有效或如何调用它的方法即使这样做。

提前致谢！

Answer 1

这是我的解决方案：

将 api 对不依赖于 useEffect 的调用移动到运行仅在安装时（完全可选）
创建一个新状态来存储随机数，假设 currentResult
每次单击按钮时，生成一个随机数并使用 setCurrentResult

currentResult

重构渲染模板以使用 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>
)}

处理从 fetch api object 问题中随机返回的项目

Playing with randomly returned item from fetch api object issue

arrays

reactjs

fetch