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

【问题标题】：this.setState is only pulling last value in arraythis.setState 仅提取数组中的最后一个值
【发布时间】：2019-03-29 16:05:45
【问题描述】：

我对 React 非常陌生，不知道如何从外部 JSON 文件呈现这个嵌套数组。 remittance 是这里唯一一个包含我需要访问和呈现的嵌套值的数组。它可以很好地记录到控制台，但不会在 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;

JSON 文件是这样的。因为汇款的金额可以很大，我不能硬编码在一个索引里每次都去查找。

[
  {
    "Payee": {
      "Name": "Bob",
      "Fax": "5555555555",
    },
    "Payment": {
      "PAN": 123456,
      "CVV": 123,
      "Exp": "1/2018"
    },
    "Remittance": [
      {
        "PayorName": "Me",
        "Description": "Hello World.",
      },
      {
        "PayorName": "You",
        "Description": "Hey world.",
      },
      {
        "PayorName": "Snoop",
        "Description": "Bye world.",
      }
    ]
  },

这是我最初应该发布的 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;

【问题讨论】：

能否添加PayInfo组件的代码
是的，因为你的setState 代码写在 forloop 中。提供有关您的组件的更多详细信息或创建一些工作小提琴。会更好。

标签： arrays json reactjs nested

【解决方案1】：

您可能想要做的是这样的事情： https://codesandbox.io/s/p36jlrz7jj

如您所见，我提取了另一个组件PayerInfo。 React 也可以完美地与 render 方法中的 map 配合使用。希望我的例子有所帮助！

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

这里有个小改进：你可以先循环一个单独的函数，然后返回完整的数组：https://reactjs.org/blog/2017/09/26/react-v16.0.html

【讨论】：

这种方式比我想出的更具可读性和可重用性。我一定会记住这一点。谢谢！

【解决方案2】：

在您的显示方法中，您在 for 循环中设置状态。所以只有最后一个值被设置为状态。请尝试以下代码。

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})
}

【讨论】：