Question

所以我得到了这个React项目-有一个管理页面，我可以添加新的休假（使用Reactstrap Modal）。假期将添加到数据库，并在名为AdminVacations的孩子的组件中显示。 Vacations数组将加载到孩子的组件上。这是添加Vacation的代码（在管理组件中）

 async Add (){
        let NewVac = {
        name:this.state.name,
        price:this.state.price,
        start:this.state.start,
        end:this.state.end,
        image:this.state.file,
        description:this.state.description
        }

        let r = await fetch(`${apiUrl}/addvacation`, {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(NewVac)
          });
        let jsonData= await r.json(); 
        if (r.status === 200){
            this.toggle();

        }

    }

我还获得了“编辑”和“删除”按钮-位于孩子的子组件中。问题是我需要在屏幕上显示更改（实时）。我设法使用“编辑”和“删除”按钮（因为它们位于同一组件中）但是添加按钮不存在。我该如何使Vacations状态重新从孩子的父亲组件中重新加载到孩子的组件中？

import React, { Component } from 'react';
import apiUrl from './apiUrl';
import AdminVacation from './AdminVacation';
import AdminNavbar from './AdminNavbar'


class AdminVacations extends Component {
    state={
        Vacations:[],
        userid:''
    }


    render() {

        return (

           <div className="container">


        <div class="row">
             {this.state.Vacations.map(data=> <AdminVacation key={data.id} data={data} RefreshFunc={this.RefreshFunc.bind(this)}  />)}
        </div>
    </div>
        )
    }

   async componentDidMount(){

    let response = await fetch(`${apiUrl}/allvacations`);

    let data = await response.json();

    this.setState({ Vacations:data })

    }

    RefreshFunc(){
        console.log("something Happened")
        this.componentDidMount() 
    }  
}
export default AdminVacations;

（基本上，我每次添加一个Vacation时都想再次在Child的组件中（从Admin中）运行componentDidMount-不仅是在编辑或删除它时。在AdminVacation组件中找到“编辑”和“删除”。

Answer 1

您可以在子级中使用componentDidUpdate生命周期方法来检查对props的任何更新。简而言之，它的工作原理是这样的。以下代码检查关于location的当前道具和以前的道具是否不同，如果存在，则在if块内执行操作。

componentDidUpdate(prevProps) {
  if (this.props.location !== prevProps.location) {
    window.scrollTo(0, 0); // reset scroll on route change
  }
}

从父组件触发一个函数-它将在子组件上运行componentDidMount

1 个答案: