Реагировать - обратный вызов от ребенка к родителю не работает

Question

Ранее успешный метод обратного вызова для отправки данных из дочернего компонента в родительский компонент, не работающий в этом новом проекте.

Я работаю над веб-приложением React. Есть компонент с именем Flags.js. Он содержит флаги штатов США и штат targetFlag. Компонент Flags загружается правильно, но не отправляет этот выбор targetFlag в App.js. Ранее я спрашивал о связи между детьми и родителями и получил рабочий ответ для другого проекта: Реагировать на проблему общения от ребенка к родителю . Я пытался применить эту логику к этому приложению, но безуспешно.

Github: https://github.com/irene-rojas/us-flags

App.js

import React, { Component } from 'react';
import './App.css';
import SVGMap from "./components/Map/Map.js";
import Flags from "./components/Flags/Flags";


class App extends Component {

state = {
    correct: 0,
    wrong: 0,
    targetFlag: "",
    selectedState: ""
}

onClick = (event) => {
    event.preventDefault();
    let clickedState = event.target.id;
    this.setState({
        selectedState: clickedState
    });  
    if (clickedState === this.state.selectedState) {
        this.setState({correct: this.state.correct + 1}, () => {
            console.log("correct");
            this.getFlag();
        });
    };
    if (clickedState === !this.state.selectedState) {
        this.setState({wrong: this.state.wrong + 1}, () => {
            console.log("wrong");
            this.getFlag();
        });
    }
}

getFlag = (targetFlag) => {
    this.setState({
        targetFlag: targetFlag.id
    });
    console.log(`App.js: ${this.state.targetFlag}`)
}


  render() {
    return (
  <div className="App">

    <div className="header">
        <h1>Match the Flag</h1>
    </div>

    <div className="flagsDiv">
        <Flags 
            sendFlag={this.getFlag}
        />
    </div>

    <div className="mapDiv">
        <SVGMap 
            onClick={this.onClick}
        />
    </div>

    <div className="scoreDiv">
        Correct: {this.state.correct}
        <br></br>
        Wrong: {this.state.wrong}
        <br></br>
        Target State: {this.state.targetFlag}
        <br></br>
        Selected State: {this.state.selectedState}
    </div>

  </div>
    );
  }
}

export default App;

Flags.js

import React, { Component } from 'react';
import "./Flags.css";
import alabama from "./images/Alabama.png";
import alaska from "./images/Alaska.png";
--- 48 more states in this import format ---

class Flags extends Component {

state = {
    flags: [
        {name: "Alaska", src: alaska, id: "AK"},
        {name: "Hawaii", src: hawaii, id: "HI"},
--- 48 more states in this state format ---
    targetFlag: [
        {name: "", src: "", id: ""}
    ],
};

componentDidMount() {
    let targetFlag = this.state.flags[Math.floor(Math.random()*this.state.flags.length)];
        this.setState({
            name: targetFlag.name,
            src: targetFlag.src,
            id: targetFlag.id
        });
        // console.log(`Flags.js: ${targetFlag.name}`);
}

sendFlag = (targetFlag) => {
    this.props.sendFlag(targetFlag);
}  


render() {
    return (

    <div>
        <img  
            src={this.state.src} 
            alt={this.state.id}
            onLoad={this.sendFlag}
        />
        <br></br>
        {this.state.name}
    </div>

    )
    }
}

export default Flags;

Я хочу, чтобы значение targetFlag, выбранное в Flags.js, было перенесено в App.js. Пожалуйста, дайте мне знать, если есть другие проблемы с кодом.

Answer 1

Я вытащил твой репозиторий github, Вы должны заметить, что setstate является асинхронным, поэтому вы должны использовать функцию обратного вызова

//App.js line 36
//notice the targetFlag.target.id and setstate callback function
getFlag = (targetFlag) => {
        this.setState({
            targetFlag: targetFlag.target.id
        }, ()=>{
            console.log(`App.js: ${this.state.targetFlag}`)
        });

    }

//Flags.js line 133
//notice the addition of id attribute
<img  
  src={this.state.src} 
  alt={this.state.id}
  onLoad={this.sendFlag}
  id={this.state.id}
 />