使用React Hooks展示猫事实API列表仅显示第一条问题求助

云原生阿岚

2026-9-29

问题根因

渲染异常的问题出在接口返回数据的处理逻辑：

const [factList] = list.data 此处使用数组解构赋值，仅提取了list.data数组的第一个元素，等价于const factList = list.data[0]
后续setFactList([factList])将单个元素包装为数组存入状态，导致factList始终只有1条数据，最终只渲染第一条内容

修复方案

直接将完整的list.data数组存入状态即可，修改后的getList逻辑如下：

const getList = () => {
  fetch(url)
    .then((res) => res.json())
    .then((list) => {
      console.log('List:', list);
      // 直接把完整的返回数据数组存入状态
      setFactList(list.data)
    })
    .catch((err) => {
      console.log('List ERROR ', err);
    })
}

修改后完整代码如下：

import React, { useState, useEffect } from 'react';

const url = 'https://catfact.ninja/facts?limit=15';

const Index = () => {
    const [factList, setFactList] = useState([]);

    useEffect(() => {
        getList()
    },[]);

    const getList = () => {
        fetch(url)
            .then((res) => res.json())
            .then((list) => {
                console.log('List:', list);
                setFactList(list.data)
            })
            .catch((err) => {
                console.log('List ERROR ', err);
            })
    }

    return (
        <div className='App'>
            <h1>FACT LIST</h1>
            <ul>
                {factList.map((item, index) => 
                    <li key={index}> {item.fact} </li>
                )}
            </ul>
        </div>
    )
}

export default Index

可选优化建议