map和forEach将在数组中的所有值上运行。有一个隐藏的循环，但是你不能控制循环体。
如果你想在循环中的某个位置中断，只需要使用一个for-of循环：

for (const book of books) {
    if (book.available) break;
}

对于Each doen的支撑断点，请使用for of

for (const el of arr) {
   if (el.available) {
    break;
  }
}

你不能打破forEach。
如果你只想打印一个项目。我想find方法就是你要找的。

const list = [
  {
    "Book": "Book1",
    "available": false
  },
  {
    "Book": "Book2",
    "available": false
  },
  {
    "Book": "Book3",
    "available": true
  },
  {
    "Book": "Book4",
    "available": true
  }
] 

const item = list.find(({available})=>available)
// item would be  {
//    "Book": "Book3",
//    "available": true
//  }

如需了解更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

find will short-circuit在它找到满足条件的第一个示例后执行迭代。您可能希望将该代码放在它自己的函数中，然后从JSX调用它。
注意，我在这里将Book属性重新标记为title，因为它在语义上更有意义。

const { useState } = React;

function Example({ data }) {
  
  // Get the first available book, and
  // return its title
  function findFirst(data) {
    return data.find(book => {
      return book.available;
    }).title;
  }
  
  // Call the function
  return (
    <div>
      {findFirst(data)}
    </div>
  );

}

const data=[{title:"Book1",available:!1},{title:"Book2",available:!1},{title:"Book3",available:!0},{title:"Book4",available:!0}];

ReactDOM.render(
  <Example data={data} />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

我之前遇到过同样的问题。我发现在forEach或map函数中声明break是不可能的。它将遍历整个数组。你可以在for循环中使用break。但是使用一个标志可以做到这一点。
参考：Past Stack Overflow Post
MDN文章：MDN article on ForEach()
但是for循环可以很容易地做到这一点。例如：

let data = [
  {
    "Book": "Book1",
    "available": false
  },
  {
    "Book": "Book2",
    "available": false
  },
  {
    "Book": "Book3",
    "available": true
  },
  {
    "Book": "Book4",
    "available": true
  }
]

for(let i = 0; i < data.length; i++){
  if(data[i].available){
    console.log(data[i]);
    break;
  }
}

这将给你第一个可用的，这是唯一的真。然而，你也可以使用查找函数来得到相同的输出：

let data = [
  {
    "Book": "Book1",
    "available": false
  },
  {
    "Book": "Book2",
    "available": false
  },
  {
    "Book": "Book3",
    "available": true
  },
  {
    "Book": "Book4",
    "available": true
  }
]

let findData = data.find(item => {
  if(item.available){
    return item;
  }
  return false;
});
console.log(findData);