在组件返回内部断开 map 回路

Question

I'm trying to loop into an array to create the component content, if condition on array element is not satisfied then break the loop and return 1 component

leaves.map(leave => leave.id === currentUser.id ? <div> {leave} </div> : <div> no leaves </div>)

This is the code I have so far, no leaves is printed out every time leave.id is different than currentUser's id

What I need to is, print no leaves only when none of the leaves's id matches the currentUser's id and therefore I want to break the map after printing no leaves

Answer 1

You should use Array.prototype.some . In your case, you would pass a function to the method to check whether it satisfies your condition and use the ternary operator to render the content.

 const arrWithId = [670760658, 250026214, 126834449, 987103760, 882536150, 666896331, 488576796, 186598055, 103751309, 419995457, 503676712, 487691896, 744253979, 269253696, 102370148, 237328910, 409016979, 979651614, 743486466, 445993562, 779323321, 939834768, 296731253, 925812473, 114149678]; const arrWithoutId = [123456789, 250026214, 126834449, 987103760, 882536150, 666896331, 488576796, 186598055, 103751309, 419995457, 503676712, 487691896, 744253979, 269253696, 102370148, 237328910, 409016979, 979651614, 743486466, 445993562, 779323321, 939834768, 296731253, 925812473, 114149678]; const id = 123456789; const checker = elem => id === elem; console.log(`With ID: ${arrWithId.some(checker)? "yes": "no"}`) console.log(`Array: ${arrWithId}`); console.log(`Without ID: ${arrWithoutId.some(checker)? "yes": "no"}`) console.log(`Array: ${arrWithoutId}`);