快捷導(dǎo)航

React?中在?map()?中使用條件跳出map的方法

更新時(shí)間：2023年09月28日 10:46:29 作者：火焰兔

這篇文章主要介紹了React?中在?map()?中使用條件跳出map的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

React 中在 map() 中使用條件：

在數(shù)組上調(diào)用 map() 方法。
使用 if 條件，如果條件滿(mǎn)足則顯式返回。
否則返回不同的值或返回 null 以不呈現(xiàn)任何內(nèi)容。

export default function App() {
  const arr = [1, 2, 3, 4, 5, 6];
  return (
    <div>
      {arr.map((element, index) => {
        if (element % 2 === 0) {
          return <h2 key={index}>{element}</h2>;
        }
        return <h2 key={index}>X</h2>;
      })}
    </div>
  );
}

我們使用 Array.map 方法迭代一個(gè)數(shù)組。

我們傳遞給 map() 的函數(shù)將使用數(shù)組中的每個(gè)元素和當(dāng)前迭代的索引進(jìn)行調(diào)用。

在每次迭代中，我們檢查元素是否可以被 2 整除，如果是，我們返回該元素，否則，我們返回 X。

如果您不需要渲染任何東西，則返回 null

如果你不想在 else 子句中渲染任何東西，你可以返回 null。

export default function App() {
  const arr = [1, 2, 3, 4, 5, 6];
  return (
    <div>
      {arr.map((element, index) => {
        if (element % 2 === 0) {
          return <h2 key={index}>{element}</h2>;
        }
        // ??? render nothing
        return null;
      })}
    </div>
  );
}

該示例呈現(xiàn)可被 2 整除的數(shù)字，否則不呈現(xiàn)任何內(nèi)容。

或者，我們可以使用三元運(yùn)算符。

使用三元運(yùn)算符在 map() 中使用條件

這是一個(gè)三步過(guò)程：

在數(shù)組上調(diào)用 map() 方法。
使用三元運(yùn)算符檢查條件是否為真。
如果條件為真，運(yùn)算符返回冒號(hào)左邊的值，否則返回右邊的值。

export default function App() {
  const arr = [1, 2, 3, 4, 5, 6];
  return (
    <div>
      {arr.map((element, index) => {
        return element % 2 === 0 ? (
          <h2 key={index}>{element}</h2>
        ) : (
          <h2 key={index}>X</h2>
        );
      })}
    </div>
  );
}

我們使用了與 if/else 語(yǔ)句非常相似的條件三元運(yùn)算符。

如果問(wèn)號(hào)前的表達(dá)式求值為真值，則返回冒號(hào)左側(cè)的值，否則返回冒號(hào)右側(cè)的值。

換句話(huà)說(shuō)，如果元素可以被 2 整除，我們返回元素，否則返回 X。

和前面的例子一樣，如果你想在 else 子句中什么都不返回，你就必須返回 null。

export default function App() {
  const arr = [1, 2, 3, 4, 5, 6];
  return (
    <div>
      {arr.map((element, index) => {
        return element % 2 === 0 ? <h2 key={index}>{element}</h2> : null;
      })}
    </div>
  );
}

我們?cè)谑纠惺褂昧?key prop 的索引，但是，如果有的話(huà)，最好使用一個(gè)穩(wěn)定的唯一標(biāo)識(shí)符。

出于性能原因，React 在內(nèi)部使用 key 道具。它幫助庫(kù)確保只重新呈現(xiàn)已更改的數(shù)組元素。

話(huà)雖如此，除非您處理成千上萬(wàn)的數(shù)組元素，否則您不會(huì)看到任何明顯的差異。

在 React 中打破 map() 循環(huán)（map() 只是數(shù)組的一部分）

要跳出 map() 循環(huán)：

對(duì)數(shù)組調(diào)用 slice() 方法以獲取數(shù)組的一部分。
對(duì)數(shù)組的一部分調(diào)用 map() 方法。
遍歷數(shù)組的一部分。

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Zadmei', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Delilah', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];
  // ??? map() first 2 elements of array
  return (
    <div>
      {employees.slice(0, 2).map((employee, index) => {
        return (
          <div key={index}>
            <h2>name: {employee.name}</h2>
            <h2>country: {employee.country}</h2>
            <hr />
          </div>
        );
      })}
    </div>
  );
}

Array.slice 方法不會(huì)修改原始數(shù)組，而是創(chuàng)建一個(gè)新數(shù)組（原始數(shù)組的淺表副本）。

我們將以下 2 個(gè)參數(shù)傳遞給 slice() 方法：

startIndex 要包含在新數(shù)組中的第一個(gè)元素的索引
endIndex 上去，但不包括這個(gè)索引

我們指定起始索引為 0，結(jié)束索引為 2，因此我們得到了包含元素 0 和 1 的數(shù)組的一部分。

即使我們提供給 Array.slice 方法的結(jié)束索引超過(guò)了數(shù)組的長(zhǎng)度，該方法也不會(huì)拋出錯(cuò)誤而是返回所有數(shù)組元素。

const arr = ['a', 'b', 'c'];
const first100 = arr.slice(0, 100);
console.log(first100); // ??? ['a', 'b', 'c']

我們?cè)噲D獲取一個(gè)數(shù)組的前 100 個(gè)元素，它只包含 3 個(gè)元素。

結(jié)果，新數(shù)組包含原始數(shù)組的所有 3 個(gè)元素。

Map() 只是數(shù)組的一部分，使用 filter()

我們還可以在調(diào)用 map() 之前使用 Array.filter 方法。

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Zadmei', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Delilah', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];
  // ??? map() LAST 2 elements of array
  return (
    <div>
      {employees
        .filter(employee => {
          return (
            employee.country === 'Belgium' || employee.country === 'Denmark'
          );
        })
        .map((employee, index) => {
          return (
            <div key={index}>
              <h2>name: {employee.name}</h2>
              <h2>country: {employee.country}</h2>
              <hr />
            </div>
          );
        })}
    </div>
  );
}

我們傳遞給 filter() 方法的函數(shù)會(huì)針對(duì)數(shù)組中的每個(gè)元素進(jìn)行調(diào)用。

在每次迭代中，我們檢查當(dāng)前對(duì)象是否具有等于比利時(shí)或丹麥的國(guó)家/地區(qū)屬性并返回結(jié)果。