Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.1k views
in Technique[技术] by (71.8m points)

react遍历对象数组为什么只出来一个?

大家,我在react里遍历数组对象为什么只显示出来了一个?

export default function About() {
    const [data, setData] = useState({ articles: [] });
    useEffect(async () => {
        const result = await axios(
            'http://localhost:9000/word-index/word/index'
            // '/word-index/word/index'
        );
        setData(result.data);
    }, []);
    
    console.log(data.articles);
    return (
        <div className="Index">
            {data.articles.map(item=>
                <Article key={item.id}>
                <Title>{item.title}</Title>
                <Scrollbars style={{ height: 50 }}>
                    <Content>{item.contentDesc}</Content>
                </Scrollbars>
            </Article>
            )}            
        </div>
    );
}

数据用的是 mockjs生成的

export default 
    Mock.mock(url.articleUrl, 'get', {
        'articles|3-7': [
            {
                'id|+1': 1,
                'title|1': ['端地零零一', '端地零零二', '端地零零三', '端地零零四', '端地零零五', '端地零零六', '端地零零七'],
                'content|1': [
                    '门当户对,虽然是贤人之言,但就人而言,却是愚夫愚妇之见。欲见一斑,旨在吾我之辨。',
                    '宋人赵悳考查,:就己而言曰吾,就人而言曰我。我者,从戈属,持戈自恃也。门当户对其结果的意思是同室枕戈,比于同窗。所以大耳贼的名言是对的,233333。',
                    '吾不这样。我字比吾字响,字典解释为,我有自傲,自夸,强调不借助外力,并且关系密切,熟悉时,用我自称,表示对立或是相熟。沭阳话里有一句,“我还假你什么手啊!”从这里可见一般。吾字不响亮,意义为没有或没必要持戈自恃。',
                    '那么清楚了,门户之见是保护自己的。门户下的婚姻,是找队友保护自己,因为可能德行不周全,表现为应对不当,才行不周全,表现为顾头不顾腚,或者都顾不到,于是更需要这个门当户对保证妥当不失,或者只是因为单身需要被“保护”,为求由我上升到吾。',
                    '自由恋爱是吾的层次上的。即既已立己,而欲立人。或者是达人知命,追求自在,徜徉天然。',
                    '我表对立时,沭阳话,你怎执?意思是你要怎么样?你要怎么拿你的戈干什么?意外为,你怎么样和吾没关系,你可要想好了。沭阳方言似乎对你我的分辨特别敏感,还有一词为克。组词为克他。意思是打架,打他。所谓每战必克,可见我字夸张。',
                    '吾字字典解释为上边五行,下边生命。其实可能没那么复杂。就是一家五口,承上启下,这是大人的最根本意,吾表状态,比如,“吾谁与归”,可以解释为,我们家该怎么走呢?'
                ],
                'contentDesc|1':[
                    '123132412412……',
                    '123132412412……',
                    '123132412412……',
                    '123132412412……',
                    '123132412412……',
                    '123132412412……',
                    '123132412412……',
                ],
                'date|1':[
                    '2020-12-22 15:03',
                ]
                
            }
        ]
    })

log打印的数组没问题,但是页面只显示一个。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

排查下看看是不是CSS的原因,多个Article组件叠在了一起,导致看起来好像只有一个


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...