如何将 Json 对象数组从子 class 组件传递给 React 中的父 class 组件？

Question

Inside of the class component Trivia I have a currentQuestion state variable that acts as an index. I created another class component Questions that will read from a JSON file and I want to pass it to Trivia like this:

...
 questions = <Questions index="{currentQuestion}"/>

   return (
     <div>
       <div>{finished ? "You are done" : questions.question }</div>
...

And have each question to update everytime the state currentQuestion is set above. The problem is that the either the array of objects or the indexes are undefined for everything I try. How do I pass this array to the parent component so it can receive the currentQuestion state and update the right question accordingly?

The code I tried:

import React from "react";
import "./styles.css";
import Questionsfile from "./Questionsfile.json";

export default function App() {
return (
 <div className="App">
   <h1>Hello Trivia about Elisa</h1>
   <Trivia name="Elisa" />
 
 </div>
);
}

export class Trivia extends React.Component {
constructor(props) {
 super(props);
 this.handleNextClick = this.handleNextClick.bind(this);
 this.handleBackClick = this.handleBackClick.bind(this);
 this.state = {
   isFinished: false,
   currentQuestion: 0
 };
}

handleNextClick() {
 this.setState({
   isFinished: this.state.currentQuestion === 2 ? true : false,
   currentQuestion: this.state.currentQuestion + 1
 });
}

handleBackClick() {
 this.setState({
   currentQuestion: this.state.currentQuestion - 1
 });
}

render() {
 const finished = this.state.isFinished; // I have to use this
 const currentQuestion = this.state.currentQuestion;
 let buttonNext;
 let buttonBack;
 let questions;

 if (currentQuestion < 3) {
   buttonNext = (
     <NextClickButton
       name={currentQuestion === 2 ? "Submit" : "Next"}
       onClick={this.handleNextClick}
     />
   );
 }

 if (currentQuestion > 0 && !finished) {
   buttonBack = <BackClickButton onClick={this.handleBackClick} />;
 }

// The problem starts here

questions = <Questions index="{currentQuestion}"/>

 return (
   <div>
     <div>{finished ? "You are done" : questions.question }</div>

     {buttonBack}
     {buttonNext}
   </div>
 );
}
}


function NextClickButton(props) {
return <button onClick={props.onClick}>{props.name}</button>;
}

function BackClickButton(props) {
return <button onClick={props.onClick}>Back</button>;
}


export class Questions extends React.Component {


render() {

 return <div>{Questionsfile.questions[this.props.index]}</div>;
}
} 

Answer 1

I see a couple issues in the code that you submitted.

First, you don't need to wrap in a string when passing props:

questions = <Questions index={currentQuestion}/>

Assuming that currentQuestion is a number.

Next, <Questions... /> returns a React Component. So, you can't just access its properties like this questions.question , you should instead just place the JSX inline:

 return (
   <div>
     <div>{finished ? "You are done" : <Questions index={currentQuestion}/> }</div>

     {buttonBack}
     {buttonNext}
   </div>
 );
}
}

Hope these comments help you get on the right track.

Answer 2

For long term development you should use Redux for this purpose, yet still if you have few components you can use callback function . some how like this example