Мне нужно отобразить вторую часть этого JSON из API (данные в retDonnees) с React, но я не могу найти решение после многих исследований.Я даже попробовал метод Object.Keys.map, но не смог заставить его работать.И я хотел бы использовать компонент DisplayTest для его отображения.
Здесь вы найдете мой код, и я надеюсь, что он поможет.Поэтому я был бы очень рад, если бы мне помогли какие-нибудь добрые люди.
Я с нетерпением жду вашего ответа и заранее благодарю.
JSON:
[
{
"retEntete": {
"appMode": "evaluation",
"appEtape": "init1",
"appEtapeSuivante": "init2"
},
"retDonnees": {
"constat": "Voici la question",
"instruction": "Choisissez la bonne r\u00e9ponse TEST",
"question1": "\u3053\u308c\u306f",
"question2": "vide",
"question3": "\u3067\u3059\u304b\u3002",
"reponse1": "\u3071\u3093",
"reponse2": "\u306b",
"reponse3": "\u306a\u3093",
"reponse4": "\u308f",
"reponse_correcte": "\u306a\u3093"
}
}
]
App.js
const afficheInit = {
constat: null,
instruction: null
}
const appInit = {
appMode: "evaluation",
appEtape: "init1"
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
test: afficheInit,
envEntete: appInit,
retEntete: null
};
}
componentDidMount() {
this.getTest(this.state);
}
getTest(param) {
fetch("an API", {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'text/plain'
},
body: JSON.stringify(param),
})
.then(response => response.json())
.then(data => {
console.log(data)
this.setState({
test: data[0],
});
});
}
render() {
if (mode === "Evaluation") {
return (
<MDBCol>
<MDBCard>
<MDBCardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" waves />
<MDBCardBody>
<DisplayTest test= {recupTest} />
<GenerateTest selectTest={() => this.getTest()} />
</MDBCardBody>
</MDBCard>
</MDBCol>
);
} else {
return (
<MDBCol>
<MDBCard>
<MDBCardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" waves />
<MDBCardBody>
<MDBCardTitle>???</MDBCardTitle>
<MDBCardText>
Oh!
</MDBCardText>
<MDBBtn href="#">Hey !</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
);
}
}
}
export default App;
DisplayTest.jsx
const DisplayTest = ({test}) => {
return (
<div className="DisplayTest">
<p className='superclasse'>
{test.constat}
</p>
<MDBCardTitle className= 'super'>{test.instruction}</MDBCardTitle>
<MDBCardText> {test.question1}</MDBCardText>
<MDBCardText> {test.question2}</MDBCardText>
<MDBCardText> {test.question3}</MDBCardText>
<MDBBtn>{test.response1}</MDBBtn>
<MDBBtn>{test.reponse2}</MDBBtn>
<MDBBtn>{test.response3}</MDBBtn>
<MDBBtn>{test.response4}</MDBBtn>
</div>
);
}
export default DisplayTest;