以前成功的回调方法,用于将子组件中的数据发送到在此新项目中不起作用的父组件。
我正在使用React Web应用程序。有一个名为Flags.js的组件。它包含美国状态标志和targetFlag状态。 Flags组件可以正确加载,但不会将targetFlag选择发送到App.js。之前,我曾询问过孩子与父母之间的交流,并为另一个项目React communication problem from child to parent获得了此工作答案。我尝试将该逻辑应用于此应用程序,但没有成功。
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;
我希望在Flags.js中选择的targetFlag值转移到App.js。如果代码有其他问题,请告诉我。
答案 0 :(得分: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}
/>