this.setState извлекает только последнее значение в массиве

Question

Я ОЧЕНЬ новичок в 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;

Answer 1

В вашем методе отображения вы устанавливаете состояние внутри цикла.так что только последнее значение устанавливается в состояние.Пожалуйста, попробуйте следующий код.

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

Answer 2

Возможно, вы захотите сделать что-то вроде этого: https://codesandbox.io/s/p36jlrz7jj

Как вы можете видеть, я извлек другой компонент PayerInfo.Также React прекрасно работает с картой в методе рендеринга.Я надеюсь, что мой пример поможет!

В настоящее время вы вызываете setState в цикле for и, таким образом, каждый раз перезаписываете состояние, но я думаю, вы уже поняли это.Я использую Array.map, чтобы многократно перебирать элементы в JSX.Не знаю, если можно было бы сделать это более красиво, но всегда есть возможность улучшить ^^

Небольшое улучшение: вы можете сначала зациклить отдельную функцию, а затем вернуть полный массив: https://reactjs.org/blog/2017/09/26/react-v16.0.html