我对 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;
在显示方法中,您将在循环中设置状态。 所以只有最后一个值被设置为状态。 请尝试以下代码。
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})
}
你可能想做的是这样的: https://codesandbox.io/s/p36jlrz7jj
如您所见,我提取了另一个组件PayerInfo
。此外,React 在渲染方法中与地图完美配合。我希望我的例子有所帮助!
目前您在 for 循环中调用 setState,因此每次都覆盖状态,但我想你已经想通了。我经常使用 Array.map 来遍历 JSX 中的元素。Dunno,如果一个人能做得更好,但总有可能改善^^
这里有一个小的改进:你可以先循环一个单独的函数,然后返回完整的 Array: https://reactjs.org/blog/2017/09/26/react-v16.0.html