如果一个条件在反应中是真实的，如何从循环跳过一个特定的索引？

Question

我有一系列的博客来自CMS，它呈现了一个包含图像/内容等的博客页面。

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

很简单，我想随机地从数组中选择两个博客，但要确保其中一个不是我现在所在的博客页面，我已经接近实现了，但不能完全正确地使用useEffect中的for循环。

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

这是我的反应文件：

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)