React项目使用array.forEach遍历数组仅返回单个元素问题求助

问题根因 #

• 你声明的fact、id都是单值类型的状态，遍历数组时每次调用setFact、setID都会覆盖上一次的赋值，遍历结束后状态只会保留数组最后一个元素的对应值
• 当前代码仅返回了单个<Fact />组件，没有遍历数组生成多个组件，自然只能展示一个元素
• 额外注意：React内DOM标签的类名属性要写className而非class，否则会触发控制台属性不匹配的警告

修正方案 #

1. 把单值状态替换为数组类型，存储接口返回的全量事实列表，不需要遍历调用状态更新方法，拿到数据直接整体赋值即可
2. 渲染阶段遍历事实数组，批量生成多个Fact组件，同时给列表项添加唯一key属性符合React规范
3. 把原有代码里的class属性统一替换为className

修正后完整代码 #

import React, {useState, useEffect} from "react";
import axios from "axios";

function Fact(props) {
    const width = 18;
    return (
        <div className="card" style={{width: width + 'rem'}}>
            <div className="card-body">
                <h5 className="card-title">Fact number: {props.id}</h5>
                <p className="card-text">{props.fact}</p>
            </div>
        </div>
    )
}

function UserFacts(props) {
    const [facts, setFacts] = useState([]);

    function getFact() {
        axios.get(`https://exampleapi/userfacts?email=${props.email}`,  { crossdomain: true }).then(response => {
            // 直接存储全量数组，不需要遍历更新单值
            setFacts(response.data);
        });
    }

    useEffect(() => {
        getFact();
    }, [props.email]); // 把email加入依赖数组，email变化时重新拉取数据

    return (
        // 遍历数组生成多个Fact组件
        <div className="fact-list">
            {facts.map(item => (
                <Fact 
                    key={item.id} 
                    id={JSON.stringify(item.id)} 
                    fact={JSON.stringify(item.fact)} 
                />
            ))}
        </div>
    )
}

export default UserFacts;

内容的提问来源于stack exchange，提问作者Cool cow facts