第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在子組件的按鈕單擊時重新渲染父組件

如何在子組件的按鈕單擊時重新渲染父組件

拉丁的傳說 2023-09-14 20:21:14
我正在學習 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;正如您所看到的,我正在嘗試單擊一個按鈕,以便我可以再次獲取并在我的子組件上呈現(xiàn)不同的活動。我試圖讓我的孩子組件保持無狀態(tài),但如果保持它無狀態(tài)沒有意義或者完全錯誤,我很想知道。
查看完整描述

2 回答

?
心有法竹

TA貢獻1866條經(jīng)驗 獲得超5個贊

您可以嘗試將獲取函數(shù)移到 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();

  }


查看完整回答
反對 回復 2023-09-14
?
慕娘9325324

TA貢獻1783條經(jīng)驗 獲得超4個贊

您可以創(chuàng)建一個類方法來獲取新活動,
在應(yīng)用程序首次安裝后調(diào)用它,componentDidMount()并在從子組件調(diào)用它時再次調(diào)用它Activity

  • 您應(yīng)該在問題中提到,
    您提出的每個請求的響應(yīng)正文都是不同的。

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


查看完整回答
反對 回復 2023-09-14
  • 2 回答
  • 0 關(guān)注
  • 136 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號