如何在子组件的按钮单击时重新呈现父组件

Question

我正在学习 React，我仍然认为自己是初学者。我的目标是单击我的子组件上的一个按钮，以便我可以重新呈现父组件。这是我的代码。

父组件

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;

子组件

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;

如您所见，我正在尝试单击一个按钮，以便我可以在我的子组件上获得另一个提取和不同的 activity 呈现。我试图让我的子组件保持无状态，但如果保持它无状态没有意义或者完全错误，我很想知道。

Answer 1

您可以尝试将抓取功能移到 componentDidMount 之外

例如：

  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();
  }

Answer 2

您可以创建一个 class 方法来获取新的 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;

这里还有一个沙箱：
https://codesandbox.io/s/dreamy-noether-q98rf?fontsize=14&hidenavigation=1&theme=dark

如何在子组件的按钮单击时重新呈现父组件

How to re-render parent component on child component's button click

javascript

event-handling

async-await

reactjs