Javascript ReactJS-状态数组的映射

我正在创建一个金融网站，但遇到了问题，因为.map没有在一个状态数组上执行。这两天我一直在用头撞墙。我认为这是一件非常小的事情

下面是我用来填充数组并设置状态的

GET

调用

.then(() => {
            var transactions = [];
            axios.get("http://localhost:5000/transactions").then(res => {
                res.data.transactions.transactions.forEach(function(txn, idx) {
                    transactions.push({name: txn.name, amount: txn.amount, date: txn.date});
                    // item.push("hey");
                });
            });
            this.setState({transactions: transactions, balance: content.balance});
        }).catch(err => console.log(err));

然后我的渲染方法如下所示

render() {
        var list = this.state.transactions.map((item, id) => {
            return (
                <VerticalTimelineElement
                    className="vertical-timeline-element--work"
                    contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
                    contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
                    date={item.date}
                    iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
                    key={id}
                >
                    <h3 className="vertical-timeline-element-title">{item.name}</h3>
                    <h4 className="vertical-timeline-element-subtitle">${item.amount}</h4>
                </VerticalTimelineElement>
            );
        });

        return (
            <VerticalTimeline>
                {list}
            </VerticalTimeline>
        );
    }

render（）{
var list=this.state.transactions.map（（项目，id）=>{
返回(
{item.name}
${item.amount}
);
});
返回(
{list}
);
}

尝试使用React钩子。已经忘记了过去的方式

import React, { useState } from 'react';
...
const [transactions, setTransactions] = useState(() => {
   const temp = [];
   axios.get("http://localhost:5000/transactions").then(res => { 
      res.data.transactions.transactions.forEach(function(txn, idx) {
          temp.push({name: txn.name, amount: txn.amount, date: txn.date});
      });
   });
   return temp;
});

---

由于

axios.get

是异步运行的，因此对

setState

的调用可能会在

transaction

包含任何项目之前运行。对

axios.get

的调用应上移到

axios.get（）。然后（）

块：

.then(() => {
    var transactions = [];
    axios.get("http://localhost:5000/transactions").then(res => {
        res.data.transactions.transactions.forEach(function(txn, idx) {
            transactions.push({name: txn.name, amount: txn.amount, date: txn.date});
            // item.push("hey");
        });
        this.setState({transactions: transactions, balance: content.balance});
    });
}).catch(err => console.log(err));

另外，请注意，在数组中使用项的索引作为键不是最佳做法，如果对数组重新排序或添加或删除项，可能会导致意外结果。根据：

密钥应该是稳定的、可预测的和唯一的。不稳定的键（如Math.random（）生成的键）将导致不必要地重新创建许多组件实例和DOM节点，这可能会导致性能下降和子组件中的状态丢失

你能试试这个吗

const {transactions: collection } = res.data.transactions
const transactions = collection.map(({ name, amount, date }) => ({ name, amount, date }));

this.setState({transactions, balance: content.balance});

我也认为你需要在你体内移动这个

。然后

阻塞

虽然这样会更好，但试试这个

---

让我知道你进展如何

您遇到了什么问题？没有渲染任何内容，即使事务数组中有项，映射方法也没有运行。请显示一个映射最初的样子示例我想我不明白您的意思。这是准确的代码。@CR05S19XX另外，我注意到您没有在

块中更新您的状态。您应该将调用移动到
axios.get（）中的
setState（）
。然后（）
这应该是错误的，因为您在foreach函数中重复调用setState。事务数组引用没有更改，因此并非所有更新都会反映在屏幕上。我不小心将调用移动到
setState
一行太高！你是对的：
setState
应该在
forEach
之后调用，我现在已经修复了我的代码。谢谢