Arrays this.setState仅提取数组中的最后一个值

我对React非常陌生，不知道如何从外部JSON文件呈现这个嵌套数组。汇款是这里唯一一个具有嵌套值的数组，我需要访问和呈现这些值。它可以很好地登录到控制台，但不会在setState上分离。如果这看起来很糟糕，我道歉

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      data,
      rName: "",
      rDescription: "", 
    }
  }

  componentDidMount(){
    console.log("Mounted!");
    this.display();
  };

  display = () => {
    for (var i = 0; i < data.length; i++){
      var remittanceList = data[i].Remittance;
     // console.log(remittanceList);
      for (var x = 0; x < remittanceList.length; x++){
        var rName = remittanceList[x].PayorName;
        var rDescription = remittanceList[x].Description;
        console.log(rName + rDescription);
        this.setState({rName, rDescription});

      }
    }
  }


  render() {
    var { rName, rDescription } = this.state;

    return (
      <div className="App">
      <Title/>
      {this.state.data.map((each, index) => (
      <PayInfo key={index}
        name={each.Payee.Name}
        fax={each.Payee.Fax}

        pan={each.Payment.PAN}
        cvv={each.Payment.CVV}
        exp={each.Payment.Exp}

        payorName={rName}
        description={rDescription}
      />
      ))}
      </div>
    );
  }
}
export default App;

这是我最初应该发布的PayInfo.js文件！不确定这是否改变了我以前得到的答案

import React from "react";
import "./PayInfo.css";

const PayInfo = props => (
<div>
    <div id="payee">
    <p>Payee</p>

        <p>{props.name}</p>
        <p>Fax: {props.fax}</p>

    </div>
    <hr></hr>

    <div id="payment">
        <p>Payment</p>
        <p>PAN: {props.pan}</p>
        <p>CVV: {props.cvv}</p>
        <p>Exp: {props.exp}</p>
    </div>
    <hr></hr>

    <div id="remittance">
        <p><strong>Remittance(s)</strong></p>
        <p>Payor: {props.payorName}</p>
        <p>Description: {props.description} </p>
    </div>
    <hr></hr>
    <hr></hr>


</div>
);

export default PayInfo;

从“React”导入React；
导入“/PayInfo.css”；
const PayInfo=props=>(
受款人

{props.name}

传真：{props.Fax}


付款

潘：{props.PAN}

CVV:{props.CVV}

Exp:{props.Exp}


汇款

付款人：{props.payorName}

描述：{props.Description}



);
导出默认支付信息；

您可能希望执行以下操作：

如您所见，我提取了另一个组件

PayerInfo

。此外，React在渲染方法中与贴图完美配合。我希望我的例子有帮助

目前，您在for循环中调用setState，因此每次都会覆盖该状态，但我猜您已经找到了该状态。我经常使用Array.map循环JSX中的元素。不知道是否有人能做得更好，但总有改进的可能^^

---

这里有一个小小的改进：您可以先在一个单独的函数中循环，然后返回完整的数组：

在显示方法中，您正在为循环设置内部状态。因此，只有最后一个值被设置为状态。 请尝试下面的代码

display = () => {
let totalRemittanceArray = []
for (var i = 0; i < data.length; i++) {
  var remittanceList = data[i].Remittance;
  for (var x = 0; x < remittanceList.length; x++) {
    var rName = remittanceList[x].PayorName;
    var rDescription = remittanceList[x].Description;
    console.log(rName + rDescription);
    totalRemittanceArray.push({ rName, rDescription })
  }
}
this.setState({totalRemittanceArray})
}

display=（）=>{
让TotalTransitenCarray=[]
对于（变量i=0；i

您可以添加

PayInfo

组件的代码吗当然可以，因为您的

setState

代码是在forloop中编写的。提供有关组件的更多详细信息或创建一些wokring fiddle。这样做会更好，比我的想法更具可读性和可重用性。我一定会记住这一点。非常感谢。

display = () => {
let totalRemittanceArray = []
for (var i = 0; i < data.length; i++) {
  var remittanceList = data[i].Remittance;
  for (var x = 0; x < remittanceList.length; x++) {
    var rName = remittanceList[x].PayorName;
    var rDescription = remittanceList[x].Description;
    console.log(rName + rDescription);
    totalRemittanceArray.push({ rName, rDescription })
  }
}
this.setState({totalRemittanceArray})
}