array.forEach() 只返回一个元素答案

【问题标题】：array.forEach() only returning one elementarray.forEach() 只返回一个元素
【发布时间】：2021-11-05 09:54:34
【问题描述】：

在我的函数中，我使用array.forEach 对数组进行排序，但它只返回元素。这是我的代码：

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

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

function UserFacts(props) {

    const email = props.email;

    const [fact, setFact] = useState("");
    const [id, setID] = useState("");

    function getFact() {
        axios.get("https://exampleapi/userfacts?email=" + email + "",  { crossdomain: true }).then(response => {
            const array = response.data
            array.forEach(element => setFact(JSON.stringify(element.fact)));
            array.forEach(element => setID(JSON.stringify(element.id)));
        });
    }

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

    return (
        <Fact id={id} fact={fact} />
    )
}

export default UserFacts;

【问题讨论】：

是fact 和id 数组？
当您调用 forEach 并调用 setFact 和 setID 方法时，您正在为每次迭代设置值。这意味着，只有最后一项将在迭代结束时设置。您需要不同的数据类型。
ForEach 旨在针对 éléments 执行操作，而不是返回元素

标签： javascript reactjs json for-loop axios

【解决方案1】：

这里有几个问题：

您的挂钩仅存储 1 个值，因此循环将在每次迭代时替换该值。

我建议像这样制作你的状态数组：

const [facts, setFacts] = useState([]);

const [ids, setIds] = useState([]);

然后在获取这些值时只需推送到状态：

axios.get("https://exampleapi/userfacts?email=" + email + "",  { crossdomain: true }).then(response => {
 const array = response.data
 array.forEach(element => facts.push(JSON.stringify(element.fact)));
 array.forEach(element => ids.push(JSON.stringify(element.id)));
});

您只返回 1 个事实组件，您需要在组件上循环遍历数组以生成超过 1 个

return (
   {facts.map((fact, i) => {
      return <Fact id={ids[i]} fact={fact} />
   }}
)

我一直坚持您的方法，但您可能要考虑使用一个状态来存储 Fact 对象的数组，这些对象将 fact 和 id 放在一起，因为我觉得这通常读起来更好在 jsx 上循环。

【讨论】：