Блог

Главная - Вопросы по программированию - React list.map() отображает дважды

React list.map() отображает дважды

#reactjs #render

#reactjs #визуализация

Вопрос:

Я хотел бы отображать панель мониторинга с простым списком элементов при нажатии на кнопку. Приложение использует React.

Я добавил некоторые console.log() внутри рендеринга, когда items.map() выполняется, и я замечаю, что console.log() появляется дважды.

Код предоставляется здесь.

Мне интересно, почему он отображает дважды. Вы знаете, что происходит, пожалуйста? Спасибо.

Ответ №1:

Это не связано с map() или какой-либо другой функцией реализации. Это связано с работой StrictMode в разработке. Это было объяснено Дэном Абрамовым здесь.

Вы можете удалить <StrictMode> из своего index.js и увидеть, что этот эффект исчезает.

И это не повлияет на ваше приложение в рабочей сборке.

Комментарии:

1. ОК. Спасибо за ваш ответ. Как мы должны отличать эффект от StrictMode от фактического неправильного поведения в приложении?

2. Я думаю, вы могли бы использовать свой console.log inside shouldComponentUpdate() вместо render() (или inside useEffect() , если вы используете реагирующие хуки).