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

Posted 2023-03-16

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

【英文标题】：Styled components cause react-dom.production.min.js:4482 Error: Minified React error #31;

【发布时间】：2020-02-24 05:05:36

【问题描述】：

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

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

我正在使用 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;```

【问题讨论】：

我怀疑这与styled-components 有什么关系，这个错误意味着您正在尝试在应用程序的某处渲染一个object

但是在开发版本中一切正常。它只在我制作生产版本时崩溃。无论上述情况如何，都应该出现这个错误，不是吗？

【参考方案1】：

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