Проблема с 'styled-component': Ошибка: неверный вызов ловушки - PullRequest
Новая
       10

Проблема с 'styled-component': Ошибка: неверный вызов ловушки

2 голосов
/ 06 февраля 2020

Я работаю через учебник, где они используют styled-component. Стиль назначается в файле js после рендеринга, и я получаю Неверный вызов ловушки. Это мой первый учебник по реагированию, поэтому я пытаюсь просто найти ответ в Google. Ниже приведен код, который я запускаю. Ошибка появляется только когда я звоню <MovieGrid>. Любая помощь будет оценена 

/* eslint react/no-did-mount-set-state: 0 */
import React, { Component } from 'react';
import styled from 'styled-components';
import Movie from './Movie';

class MoviesList extends Component {
  state = {
    movies: [],
  }

  async componentDidMount() {
    try {
      const res = await fetch('url');
      const movies = await res.json();
      this.setState({
        movies: movies.results,
      });
    } catch (e) {
      console.log(e);
    }
  }

  render() {
    return (
      <MovieGrid>
        {this.state.movies.map(movie => <Movie key={movie.id} movie={movie} />)}
      </MovieGrid>
    );
  }
}

export default MoviesList;

const MovieGrid = styled.div`
  display: grid;
  padding: 1rem;
  grid-template-columns: repeat(6, 1fr);
  grid-row-gap: 1rem;
`;

1 Ответ

0 голосов
/ 16 февраля 2020

Итак, проблема оказалась в другом файле. Я пытался import Movie, но я не знал, что переменные не будут экспортироваться по умолчанию, поэтому я добавил экспорт до объявления, и это решило проблему. 

export const Poster = styled.img`
  box-shadow: 0 0 35px black;
`;
...