Я получаю правильный результат, но в моем отладчике на вкладке консоли я всегда вижу вдвое больше ожидаемого результата

Question

У меня есть два объекта в массиве. Каждая запись отличается по-своему. Если я теперь сопоставлю этот массив, я получу правильный результат во внешнем интерфейсе, но всегда на моей консоли, в отладчике, всегда удваивается. Почему это так?

 export default function Kalender() {

 const mitarbeiter = [
{
  name: "Benjamin Koubik",
  urlaub: ["01.08.2020", "02.08.2020"],
},
{
  name: "Kathrin Krautz",
  urlaub: ["15.08.2020", "18.08.2020", "26.08.2020"],
},
];


function Fehltage(mit) {
  console.log(mit);
}

 return (
<>
  <TableContainer component={Paper}>

      <TableBody>
        {mitarbeiter.map((mitarbeiter, index) => (
          <TableRow key={index}>
            <TableCell component="th" scope="row">
              {mitarbeiter.name}
            </TableCell>
            {Fehltage(mitarbeiter)}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>
</>
 );
}

В моем отладчике на вкладке консоли я вижу:

On my WebApp i get the right result:

введите описание изображения здесь

Answer 1

Вероятно, вы используете React Strict Mode в своем приложении, см. index.js для

<React.StrictMode>
        
      </React.StrictMode>

В строгом режиме компонент rendered дважды, поэтому вы видите два console.logs

Чтобы этого не произошло, просто замените его на

<>

</>

или

 <React.Fragment>
   
    </React.Fragment>