Почему компонент unknown?

Question

[lexstile]

App:

export const App = () => {
  const [layout, handleChangeLayout] = useState(LayoutType.DESKTOP);

  return (
    <React.Fragment>
      <Header>
        {PAGE_TITLE}
      </Header>
      <SwitchLayout
        layout={layout}
        onChangeLayout={handleChangeLayout}
      />
      <MovieList
        layout={layout}
      />
    </React.Fragment>
  );
};

MovieList:

export const MovieList = connect(
  createStructuredSelector({
    movies: getMoviesSelector,
    recommendations: getRecommendationsSelector,
  }),
  { getData: requestData },
)(({
  movies,
  recommendations,
  layout,
  getData,
} : MovieListPropsType) => {
  useEffect(() => {
    getData();
  }, []);

  return (
    <div className="container">
      <div className="row">
        {movies && movies.map((movie, index) => (
          <Movie
            key={movie.id}
            even={(index + 1) % 2 === 0}
            layout={layout}
            movie={movie}
            recommendation={find(recommendations, { movieId: movie.id })}
          />
        ))}
      </div>
    </div>
  );
});

Почему компонент-обертка unknown? (Так и должно быть или я где-то что-то упустил? Что именно?)

Answer 1

[Антон Спирин]

Суть проблемы в том, что у анонимной функции пустое свойство name.
React использует либо заданное свойство displayName, либо собственное свойство функции name. Ни одно из свойств не найдено и вы видите Unknown
connect в свою очередь, если при создании обертки не находит одно из этих свойств использует слово Component, которое вы и видите в скобках.

По-хорошему, компоненты описывают так:

const MovieList: React.FC<MovieListPropsType> = ({ ... }) => { ... };

const mapStateToProps = createStructuredSelector({ ... });

const mapDispatchToProps = { ... };

export default connect(mapStateToProps, mapDispatchToProps)(MovieList);

P.S. у вас ошибка в слове Desktop.

Comments

[lexstile]

Доходчиво, благодарю.
По поводу стиля, на разных проектах требуют разный стиль, поэтому сейчас я как раз переучиваюсь с того, который Вы описали выше, на тот, который в теле вопроса.
Да, ошибку не заметил - еще раз благодарен.

[lexstile]

Единственное, чего я не понял, можно ли решить проблему unknown, оставив компонент в виде анонимной функции...

[Антон Спирин]

lexstile, не знаю зачем в проекте выбрали такой стиль, по мне -100500 к читаемости. Как вариант заменить стрелочную функцию на обычную:

export const MovieList = connect( ... )(function MovieList( ... ) { ... });

[lexstile]

Антон Спирин, я тоже не знаю, к сожалению. Благодарю за предложенные решения проблем.

Answer 2

[Алексей Уколов]

const MovieList = ...

MovieList.displayName = 'MovieList';

export MovieList;

Comments

[lexstile]

Немного не то