如果 React 中的条件为真，如何从循环中跳过特定索引？

Question

我有一系列来自 CMS 的博客，这些博客呈现出带有图像/内容等的博客页面。

然后，在此博客页面的底部，我建议用户从数组中的博客列表中签出另外 2 个博客。

很简单，我想从数组中随机选择 2 个博客，但要确保其中一个不是我当前所在的博客页面，我接近实现这一目标，但无法完全正确使用useEffect 中的 for 循环。

我想我可以检查博客文章的 uid，如果它与当前 url 端点匹配，则使用 state 中的 next & prev 作为数组的索引跳过它。

这是我的反应文件：

export default function Case({ data, cases }) {
  const [next, setNext] = useState(0);
  const [prev, setPrev] = useState(0);

  const { results } = cases;
  console.log(results);

  useEffect(() => {
    let currentUrl = window.location.pathname;
    currentUrl = currentUrl.split('/')[2];
    console.log(currentUrl);

    for (let i = 0; i < results.length; i++) {
      if (results[i].uid === currentUrl) {
         // how to solve here?

      }
    }
  }, []);

  return (
    <div className='h-full w-full bg-white'>
      <div className='bg-gray-100'>
        <div className='max-w-5xl mx-auto bg-white py-20 -mt-16 rounded-lg shadow-lg px-8 z-10 relative'>
          <div className='flex flex-col md:flex-row justify-around md:space-x-36'>
            <div className=''>
              <p className='text-3xl text-left'>
                {RichText.asText(data.client)}
              </p>
              <p className='text-xl text-left font-light mt-6'>
                {RichText.asText(data.title)}
              </p>
            </div>
            <div className='md:w-1/3 flex flex-col justify-between mt-6 md:mt-0'>
              <p className='text-3xl text-blue-500 text-left'>
                {RichText.asText(data.overview)}
              </p>
              <div className='flex space-x-28 items-start mt-8 md:mt-20'>
                <div>
                  <p className='text-xl font-bold'>Category</p>
                  <p className='mt-8'>{RichText.asText(data.category)}</p>
                </div>
                <div>
                  <p className='text-xl font-bold'>Date</p>
                  <p className='mt-8 whitespace-nowrap'>
                    {moment(data.date).format('MMM YYYY')}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div>
          <p className='text-3xl text-center'>Want to learn more?</p>
          <p className='text-2xl font-light text-center mt-4'>
            Check out our other solutions!
          </p>
        </div>
      <div
        className='bg-white w-full relative flex justify-center'
        style={{ height: '70vh' }}>
        <div className='absolute -top-1/3 flex flex-col md:flex-row gap-6'>
          <div className='text-center px-8 md:px-0'>
            <Link href={`/case-studies/${results[next].uid}`}>
              <button className='py-2 px-6 rounded-md bg-blue-500 text-white mt-8'>
                {' '}
                Read more
              </button>
            </Link>
          </div>

          <div className='text-center px-8 md:px-0'>
            <Link href={`/case-studies/${results[prev].uid}`}>
              <button className='py-2 px-6 rounded-md bg-blue-500 text-white mt-8'>
                Read more
              </button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}

我确信它非常简单，但我们将不胜感激！

提前致谢。

Answer 1

我不确定，uid 和currentUrl 是否是要比较的正确properties，但您需要过滤results，最好使用js es6 数组方法.
至少逻辑可以帮助你理解。
另外，我不确定您是否需要useEffect。

 const { results } = cases;
  console.log(results);

 
    let currentUrl = window.location.pathname;
    currentUrl = currentUrl.split('/')[2];
    console.log(currentUrl);

const filteredResults = results && results.filter(result=>result.uid !== currentUrl)