Javascript Array.map（）不'；t渲染反应组件

我遇到了一个问题，我试图渲染一个数组的数据，并将其传递给一个卡组件，但它没有出现在页面上，卡组件自己正常渲染：

import React, { Component } from 'react'
import { Container, Grid, Card, Segment, Header } from 'semantic-ui-react';
import ArticleCard from './ArticleCard';


export default class NewsGrid extends Component {
    render() {
        const {News} = this.props
        console.log(News)

        return (
            <div>
                <Container style={{marginTop: '7%'}}>
                <Grid stackable divided >
                    <Grid.Column style={{width: '66.66%'}}>
                        <Card.Group>
                            {
                                News.map(({id, ...otherArticleProps}) => (
                                    <ArticleCard key={id} {...otherArticleProps} />
                                ))
                            }
                        </Card.Group>
                    </Grid.Column>

                </Grid>
            </Container>
            </div>
        )
    }
}

import React，{Component}来自“React”
从“语义ui react”导入{容器、网格、卡片、段、标题}；
从“./ArticleCard”导入ArticleCard；
导出默认类NewsGrid扩展组件{
render（）{
const{News}=this.props
console.log（新闻）
返回(
{
News.map（{id，…otherArticleProps}）=>(

我从父页面组件将数组作为道具传递，数据通过useEffect中的flamelink API传递，如下所示：

import React, { useEffect, useState } from 'react';
import NewsGrid from '../components/NewsGrid';
import BusinessContainer from '../components/BusinessContainer';
import PolitiqueContainer from './../components/PolitiqueContainer';
import app from '../Firebase';
import { withRouter } from 'react-router-dom';

const Homepage = () => {
    const [News] = useState([])
    const [Business] = useState([])
    const [Politique] = useState([])
    const [Opinion] = useState([])
    const [Blog] = useState([])

    useEffect(() => {
        app.content.get({schemaKey: 'articles',
                        fields: ['title', 'author', 'date', 'thumbnail', 'slug', 'summary', 'category', 'id'],
                        orderBy:{field: 'date',
                        order: 'desc'},
                         })
        .then(articles => {
            for(var propName in articles) {
                const propValue = articles[propName]

                switch(propValue.category) {
                    default :
                        break;
                    case 'News': 
                        News.push(propValue)
                        break;
                    case 'Business': 
                        Business.push(propValue)
                        break;
                    case 'Politique': 
                        Politique.push(propValue)
                        break;
                    case 'Opinion': 
                        Opinion.push(propValue)
                        break;
                    case 'Blog': 
                        Blog.push(propValue)
                        break;

                }
            }
        })
    })


    return (
        <div >
            <NewsGrid  News={News} Opinion={Opinion} Blog={Blog} />
            <BusinessContainer  content={Business} />
            <PolitiqueContainer  content={Politique} />

        </div>
    );
};

export default withRouter(Homepage);

import React，{useffect，useState}来自“React”；
从“../components/NewsGrid”导入新闻网格；
从“../components/BusinessContainer”导入BusinessContainer；
从“/../components/PolitiqueContainer”导入PolitiqueContainer；
从“../Firebase”导入应用程序；
从“react router dom”导入{withRouter}；
const主页=（）=>{
const[News]=useState（[]）
const[Business]=useState（[]）
常量[Politique]=useState（[]）
常量[意见]=使用状态（[]）
const[Blog]=useState（[]）
useffect（（）=>{
app.content.get（{schemaKey:'articles'，
字段：['title'，'author'，'date'，'thumbnail'，'slug'，'summary'，'category'，'id']，
订购人：{字段：'日期'，
顺序：'desc'}，
})
.然后（文章=>{
for（文章中的名称）{
const propValue=项目[propName]
开关（propValue.category）{
违约：
打破
案件‘新闻’：
新闻推送（propValue）
打破
“业务”案例：
Business.push（propValue）
打破
“政治”一案：
政治推动（propValue）
打破
案例“意见”：
意见推送（propValue）
打破
“博客”案例：
Blog.push（propValue）
打破
}
}
})
})
返回(
);
};
导出默认路由器（主页）；

我使用firebase作为CMS的后端与Flamelink相结合。
提前感谢。
当您使用
const[News]=React.useState（[]）时
，对
新闻
所做的任何更改都不会反映在React应用程序中，因为变异
新闻
不会更新组件的状态。如果要更新
新闻
的状态，需要使用
React提供的状态分派功能。请改用状态
。尝试以下操作：

const[News，updateNews]=React.useState（[]）
//我们不能使用News.push（“某些新闻”），但我们可以通过以下方式更新新闻：
updateNews（[…新闻，'一些新闻']））

（）并添加
[]
到依赖项的
useffect
数组。这将确保
useffect
只触发一次。希望这有帮助。
您不应该做出反应，
useState
提供了第二个参数，您可以使用它来更改状态。虽然此解释在技术上不准确，但这将解决问题是使用react钩子的正确方法。
News
是可变的，因为
const
关键字和react都不强制执行不变性，但是如果不调用钩子方法更新该状态，或者
setState
    import React, { useEffect, useState } from 'react';
    import NewsGrid from '../components/NewsGrid';
    import BusinessContainer from '../components/BusinessContainer';
    import PolitiqueContainer from './../components/PolitiqueContainer';
    import app from '../Firebase';
    import { withRouter } from 'react-router-dom';

    const Homepage = () => {
      const [news, setNews] = useState([]);
      const [business, setBusiness] = useState([]);
      const [politique, setPolitique] = useState([]);

  const [opinion, setOpinion] = useState([]);
  const [blog, setBlog] = useState([]);

  useEffect(() => {
    app.content
      .get({
        schemaKey: 'articles',
        fields: ['title', 'author', 'date', 'thumbnail', 'slug', 'summary', 'category', 'id'],
        orderBy: { field: 'date', order: 'desc' },
      })
      .then(articles => {
        for (let propName in articles) {
          const propValue = articles[propName];

          switch (propValue.category) {
            case 'News':
              setNews(propValue);
              break;
            case 'Business':
              setBusiness(propValue);
              break;
            case 'Politique':
              setPolitique(propValue);
              break;
            case 'Opinion':
              setOpinion(propValue);
              break;
            case 'Blog':
              setBlog(propValue);
              break;
            default:
                break;
          }
        }
      });
  }, []);

  return (
    <div>
      <NewsGrid News={news} Opinion={opinion} Blog={blog} />
      <BusinessContainer content={business} />
      <PolitiqueContainer content={politique} />
    </div>
  );
};

export default withRouter(Homepage);

const [stateVariable, setStateVariable] = useState();