Question

我必须使用React显示来自JSON的第二部分（来自retDonnees中的数据），但是经过大量研究，我似乎找不到解决方案。我什至尝试了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;

Answer 1

谢谢您的答复。现在使用我的代码，我只显示卡和按钮。但是没有数据（我想显示数据）。这是一张图片： Data not displaying

如果我单击按钮，React会告诉我DisplayTest中的测试未定义。我加入了这张照片，以便更加清楚。 test is undefined

如何在JSON API中显示嵌套对象

1 个答案: