React中如何避免连续获取数组中的相同随机对象？

你的当前实现每次点击都会随机挑选一个对象，但无法避免连续两次选中同一个，而且每次点击都重复请求JSON数据，没必要。可以通过以下方式修改：

1. 新增状态记录上一次选中的对象，避免重复
2. 仅在组件挂载时请求一次数据并缓存，提升性能

修改后的完整代码：

import { useState, useEffect } from 'react'
import '../styles/GetData.css'

const GetData = () => {
  const [currentFact, setCurrentFact] = useState(null)
  const [lastFact, setLastFact] = useState(null)
  const [factsList, setFactsList] = useState([])

  // 组件挂载时仅请求一次数据
  useEffect(() => {
    fetch('facts.json', {
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json'
      }
    })
      .then((response) => response.json())
      .then((result) => {
        setFactsList(result.facts)
        // 初始化时随机选第一个
        const initialFact = result.facts[Math.floor(Math.random() * result.facts.length)]
        setCurrentFact(initialFact)
        setLastFact(initialFact)
      })
  }, [])

  const getRandomFact = () => {
    if (factsList.length === 0) return

    // 过滤掉上一次选中的对象，得到可选列表
    const availableFacts = factsList.filter(fact => fact !== lastFact)
    // 如果可选列表为空（说明只有一个数据），直接用原列表
    const targetList = availableFacts.length > 0 ? availableFacts : factsList
    const randomFact = targetList[Math.floor(Math.random() * targetList.length)]
    
    setCurrentFact(randomFact)
    setLastFact(randomFact)
  }

  return (
    <div>
      <div className='btn'>
        <button onClick={getRandomFact} disabled={factsList.length === 0}>Get Random Fact</button>
      </div>
      {currentFact && <h2>{currentFact.text}</h2>}
    </div>
  )
}

export default GetData

关键说明：

• 用factsList缓存所有获取到的事实数据，避免重复请求
• lastFact记录上一次选中的对象，每次随机时先排除它
• 处理了数据为空的情况，给按钮添加disabled属性防止无效点击
• 初始化时自动加载一个随机事实，提升用户体验

内容的提问来源于stack exchange，提问作者Fred