我使用React.js制作了一个简单的应用程序,每次点击按钮都会建议随机地点。 问题是:点击一次后无法重新呈现组件。 如何在每次点击按钮时获取新的地点。
place.js 用于获取数据的Fetch API。
state = { loading: true, person: null };
async componentDidMount() {
let Xyurl = "https://cors-anywhere.herokuapp.com/";
let url =
"https://wainnakel.com/api/v1/GenerateFS.php?uid=26.2716025,50.2017993&g et_param=value";
let response = await fetch(Xyurl + url);
let data = await response.json();
this.setState({ place: data, loading: false });
}
render() {
return (
<div>
<div>
{this.state.loading || !this.state.place ? (
<div>loading......</div>
) : (
<div className="PlcseContiner">
<img alt="description" src= .
{this.state.place.image[0]} />
{this.state.place.name}
</div>
</div>
);
建议将按钮定位在哪里以呈现地点。
class Suggestion extends Component {
constructor(props) {
super(props);
this.state = {
visible: false
};
this.handleClicked = this.handleClicked.bind(this);
}
handleClicked(event) {
event.preventDefault();
this.setState({
visible: true
});
}
generateplace() {
if (this.state.visible) {
return <Place />;
}
return null;
}
render() {
return (
<div className="main-button">
<Button onClick={this.handleClicked} color="warning" className="Btn">
suggestion
</Button>
{this.generateplace()}
</div>
);
}
}
getPlace
函数传递给Suggestion组件,并在onPress按钮上调用getPlace
函数。 - Idan