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

样式化组件导致构建崩溃

伙计们，我对样式化组件有问题；/

我正在使用CreateReact应用程序，在我“npm运行构建”并在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;```

从“样式化组件”导入样式化；
从“/countries.json”导入countriesJSON；
const Container=styled.div`
最大宽度：1200px；
保证金：0自动；
`;
const Wrapper=styled.div`
显示器：flex；
弯曲方向：立柱；
高度：100vh；
证明内容：中心；
对齐项目：居中；
`;
const Button=styled.Button`
背景：白烟；
边界半径：3px；
高度：5vh；
宽度：20vw；
边框：2倍纯色橙色；
颜色：“石板灰”；
边缘：0 1米；
填充物：0.25em 1米；
&：悬停{
背景：白烟；
转换：比例（1.2）；
`;
const Text=styled.h1`
字体大小：calc（2vw+10px）；
字体大小：粗体；
文本对齐：居中；
颜色：白烟；
`;
const段落=styled.p`
颜色：白烟；
字体大小：calc（1vw+10px）；
`;
const CountryWrapper=styled.div`
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
@介质（最小宽度：600px）{
弯曲方向：行；
}
`;
const CountryDetailsWrapper=styled.div`
利润率：10px；
文本对齐：居中；
`;
const CountryImgWrapper=styled.div`
img{
高度：40vh；
保证金：0自动；
宽度：90vw；
填充：10px；
}
@介质（最小宽度：596px）{
img{
宽度：30vw；
高度：30vh；
}
}
`;
类主页扩展组件{
建造师（道具）{
超级（道具）；
此.state={
国家：“，
isCountryWrapperVisible:false，
国旗：''，
countryRegion:“”，
国家货币：“”，
countryCapital:“”，
农村人口：''，
国家时区：“”
}};
GeneratorDomainCity=（）=>{
设num=Math.floor（Math.random（）*countriesJSON.length）；
这是我的国家({
randomCountry:countriesJSON[num]。名称
});
};
componentDidUpdate（）{
this.fetchCountryInfo（）；
}
fetchCountryInfo=（）=>{
取回(`https://restcountries.eu/rest/v2/name/${this.state.randomCountry}`）
.then（res=>res.json（））
。然后（响应=>
这是我的国家({
countryFlag:响应[0]。标志，
countryCapital:响应[0]。首都，
countryRegion:响应[0]。区域，
countryCurrency:响应[0]。货币，
countryPopulation:响应[0]。人口，
isCountryWrapperVisible:true
})
);
};
render（）{
返回(
测试你的旗帜知识
打我！
{this.state.isCountryWrapperVisible&&(
名称：{this.state.randomCountry}
首都：{this.state.countryCapital}
地区：{this.state.countryRegion}
人口：{this.state.countryPopulation}
) }
)
}
}
导出默认主页```

事实证明，问题出在父组件中的全局样式对象上，我必须重新编码。

我怀疑这与

样式化的组件有任何关系。

，此错误意味着您正试图在应用程序中的某个位置渲染对象，但在开发版本中一切正常。它只在我制作生产版本时崩溃。Th不管上述情况如何，都会出现错误，不是吗？