样式化的组件导致 react-dom.production.min.js:4482 错误：缩小的 React 错误 #31；

Question

样式化的组件会导致构建崩溃

伙计们，我对样式组件有疑问；/。

我正在使用 create-react-app 并且一切正常，直到我“npm run build”并将应用程序部署到我的 FTP 上。

我不断收到这个奇怪的错误，并没有在网上找到任何解决方案。我的代码附在下面。应该简单明了。

有什么想法吗？

import styled from 'styled-components';
import countriesJSON from './countries.json';

const Container = styled.div`
     max-width: 1200px;
     margin: 0 auto;
    `;

const Wrapper = styled.div`
        display: flex;
        flex-direction: column;
     height: 100vh;
         justify-content: center;
     align-items: center;

     `;

const Button = styled.button`
  background: whitesmoke;
  border-radius: 3px;
  height: 5vh;
  width: 20vw;
  border: 2px solid orange;
  color: 'slategrey';
  margin: 0 1em;
  padding: 0.25em 1em;

  &:hover {
    background: whitesmoke;
    transform: scale(1.2);
`;

const Text = styled.h1`
  font-size: calc(2vw + 10px);
  font-weight: bold;
  text-align: center;
  color: whitesmoke;

`;

const Paragraph = styled.p`
  color: whitesmoke;
  font-size: calc(1vw + 10px);
`;


const CountryWrapper = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;

    @media (min-width: 600px) {
     flex-direction: row;
     }
`;

const CountryDetailsWrapper = styled.div`
    margin: 10px;
    text-align: center;
`;

const CountryImgWrapper = styled.div`

    img { 
    height: 40vh;
    margin: 0 auto;
     width: 90vw;
     padding: 10px;
     }

     @media (min-width: 596px) {
    img {
     width: 30vw;
    height: 30vh;
    }
    }
`;


class Homepage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            randomCountry: '',

            isCountryWrapperVisible: false,
            countryFlag: '',
            countryRegion: '',
            countryCurrency: '',
            countryCapital: '',
            countryPopulation: '',
            countryTimezone: ''

        }};


    generateRandomCity = () => {

        let num = Math.floor(Math.random() * countriesJSON.length);
        this.setState({
            randomCountry: countriesJSON[num].name
        });
    };

    componentDidUpdate() {
        this.fetchCountryInfo();
    }


    fetchCountryInfo = () => {

        fetch(`https://restcountries.eu/rest/v2/name/${this.state.randomCountry}`)
            .then(res => res.json())
            .then(response =>
                this.setState({
                    countryFlag: response[0].flag,
                    countryCapital: response[0].capital,
                    countryRegion: response[0].region,
                    countryCurrency: response[0].currency,
                    countryPopulation: response[0].population,
                    isCountryWrapperVisible: true
                })
            );

    };


    render() {
        return (

            <Container>
                <Wrapper>
                    <Text> Test Your Knowledge of Flags </Text>
                    <Button onClick={this.generateRandomCity}> HIT ME! </Button>


                    {this.state.isCountryWrapperVisible && (
                        <CountryWrapper>

                            <CountryImgWrapper>
                                <img src={this.state.countryFlag} alt='flag' className='img-fluid'/>
                            </CountryImgWrapper>

                            <CountryDetailsWrapper>
                                <Paragraph>  Name: {this.state.randomCountry} </Paragraph>
                                <Paragraph>  Capital: {this.state.countryCapital} </Paragraph>
                                <Paragraph>  Region: {this.state.countryRegion} </Paragraph>
                                <Paragraph>  Population: {this.state.countryPopulation} </Paragraph>

                          </CountryDetailsWrapper>

                        </CountryWrapper>
                    ) }

                </Wrapper>
            </Container>
        )
    }
}

export default Homepage;```

Answer 1

原来问题在于我必须重新编码的父组件中的全局样式对象。