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

Question

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

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

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

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

这是我的反应文件：

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)