Question

我是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;

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;

Answer 1

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

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

当前，您在for循环中调用setState，因此每次都覆盖该状态，但是我想您已经知道了。我使用Array.map在JSX中循环很多元素。 Dunno，如果可以做得更好，但是总有可能改善^^

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

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

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

2 个答案: