[英]How to re-render parent component on child component's button click
I am learning react and I would still consider myself to be a beginner.我正在学习反应,我仍然认为自己是初学者。 My goal is to click a button on my child component so that I could re render the parent component.我的目标是单击子组件上的按钮,以便我可以重新渲染父组件。 This is the code I have.这是我的代码。
Parent Component父组件
import React, { Component } from 'react';
import Activity from './Components/Activity'
class App extends Component {
state = {
activity: ''
}
handleClick = () => {
// I have read that forceUpdate is discouraged but this is just an example
this.forceUpdate()
}
async componentDidMount() {
const url = 'http://www.boredapi.com/api/activity/'
const response = await fetch(url);
const data = await response.json();
this.setState({
activity: data.activity
})
}
render() {
return (
<div>
<Activity act={this.state.activity} click={this.handleClick}/>
</div>
);
}
}
export default App;
Child Component子组件
import React, { Component } from 'react';
class Activity extends Component {
render() {
return (
<div>
<h1>Bored? Here is something to do</h1>
<p>{this.props.act}</p>
<button onClick={this.props.click}>Something Else</button>
</div>
);
}
}
export default Activity;
As you can see I am trying to click a button so that I could get another fetch and a different activity renders on my child component.正如您所看到的,我正在尝试单击一个按钮,以便我可以获得另一个 fetch 并在我的子组件上呈现不同的活动。 I am trying to keep my child component stateless but if keeping it stateless doesn't make sense or is just plain wrong I would love to know.我试图让我的子组件保持无状态,但如果保持无状态没有意义或者完全错误,我很想知道。
You can try to move fetching function outside componentDidMount您可以尝试将 function 移出 componentDidMount
for the example:例如:
handleClick = () => {
this.fetchdata();
}
async fetchdata(){
const url = 'http://www.boredapi.com/api/activity/'
const response = await fetch(url);
const data = await response.json();
this.setState({
activity: data.activity
})
}
componentDidMount() {
this.fetchdata();
}
You can make a class method for fetching the new activity,您可以制作一个 class 方法来获取新活动,
Call it after the app first mounted with componentDidMount()
and again when you call it from the child component Activity
.在应用首次使用componentDidMount()
挂载后调用它,当您从子组件Activity
调用它时再次调用它。
import React, { Component } from 'react';
import Activity from './Activity'
class App extends Component {
state = {
activity: ''
}
handleClick = () => {
this.getActivity()
}
componentDidMount() {
this.getActivity();
}
async getActivity() {
const url = 'https://www.boredapi.com/api/activity/'
const response = await fetch(url);
const data = await response.json();
this.setState({
activity: data.activity
})
}
render() {
console.log(this.state);
return (
<div>
<Activity act={this.state.activity} click={this.handleClick}/>
</div>
);
}
}
export default App;
Here is also a sandbox:这里还有一个沙盒:
https://codesandbox.io/s/dreamy-noether-q98rf?fontsize=14&hidenavigation=1&theme=dark https://codesandbox.io/s/dreamy-noether-q98rf?fontsize=14&hidenavigation=1&theme=dark
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.