如何在子组件的按钮单击时重新渲染父组件

Question

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

父组件

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;

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

Answer 1

您可以尝试将 function 移出 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 方法来获取新活动，
在应用首次使用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