Question

最初加载组件时，它将向数据库发出get请求，以使用初始数据构建表。这很好。该表然后由子组件组成。然后，带有数据的组件将具有“更新和删除”按钮。然后，它加载一个没有数据的最终子组件，只有空白输入和一个保存按钮。当用户单击“保存”或“删除”时，我希望重新渲染表格以反映这些更改。这就是我被困住的地方。

单击这些按钮后，我尝试调用axios.get方法，更改状态forceRender（），但这些方法均不会重新加载父组件。

父母补偿

class ParentComp extends Component{
    constructor(props){
      super(props)
      this.handler = this.handler.bind(this);
      this.state = {
        data: [],
        loading: false,
        newInput: false,
      }
    }

    componentDidMount(){
      this.GetData();
    }

    handler(){
      this.setState({newInput: true});
      console.log("Called");
    } 


    GetData(){
      axios.defaults.baseURL = 'http://127.0.0.1:8000/api/';
      const header = {
        headers:{
          'Authorization': "Bearer " + sessionStorage.getItem('JWTAccess')
        }
      }
      axios.get("tableData/", header)
          .then(response => {
            this.setState({data: response.data,
              loading: true
            });
            console.log(this.state.expenses);
          })
          .catch(error => {
            console.log(error);
      })
    }

    render(){
        return(
          <div>
            <table>
            <tbody>
              <tr>
                <th>Name</th>
                <th>Value</th>
              </tr>
                {this.state.data.map(
                expenses => {
                return(                
                 <ChildComp key={Math.random()} name={data.title} dataId={data.id} value={data.value} empty={false} action={this.handler}/>                 
                );
                }
                )}
                < ChildComp key={Math.random()} name={''} dataId={''} value={''} empty={true} action={this.handler}/>
              </tbody>
            </table>
          </div>
        );
      }
  }
export default ParentComp;

带有axios调用之一的子组件（不向线程发送垃圾邮件）：

class childComp extends Component{
    constructor(props){
        super(props)
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handlePut = this.handlePut.bind(this);
        this.handleDelete = this.handleDelete.bind(this);       
        this.handleButtons = this.handleButtons.bind(this);
        this.action = this.handleButtons.bind(this);
        this.state = {
            dataId: this.props.dataId,
            name: this.props.name,
            value: this.props.value,
            empty: this.props.empty
        }
    }

    PostData(){
        axios.defaults.baseURL = 'http://127.0.0.1:8000/api/';
        const header = {
          headers:{
            'Authorization': "Bearer " + sessionStorage.getItem('JWTAccess')
          }
        }
        const payload = {
          title: this.state.name,
          cost: this.state.value
        }
        axios.post("tableData/", payload, header)
            .then(response => {
                console.log(response);
              })
            .catch(error => {
              console.log(error);
        })
      }

      handleDelete(){
          this.DeleteData();
          this.props.action();
      }

      handlePut(){
          this.PutData();
      }
      handleSubmit(){
        this.PostData();
        this.props.action();
      }

      handleButtons(){
          if(this.state.empty){
              return(
                  <td><button onClick={this.handleSubmit}>Save</button></td>
              )
          }
          else{
              return(
                <td><button onClick = {this.handlePut}>Update</button><button onClick = {this.handleDelete}>Delete</button></td>
              )
          }
      }

    render(){
        return(
            <tr>
                <td><input
                  type="text"
                  name="name"
                  placeholder="name"
                  value={this.state.name}
                  onChange={e => this.setState({ name: e.target.value })}
                /></td>
                <td>$<input
                  type="text"
                  name="value"
                  placeholder="value"
                  value={this.state.value}
                  onChange={e => this.setState({ value: e.target.value })}
                /></td>
                {this.handleButtons()}
            </tr>
        );
    }
};
export default ChildComp;

我的最终目标是使父组件在单击保存（handleSubmit（））或删除（handleDelete（））按钮后重新呈现表或整个组件。抱歉，如果我发布了很多代码，我对JavaScript和React还是很陌生，所以我仍在弄清楚相关信息是什么。感谢您的输入！

Answer 1

您可以从孩子那里调用父方法来重新渲染整个父方法。

在父母中

 <ChildComp key={Math.random()} name={data.title} dataId={data.id}
 value={data.value} empty={false} action={this.handler} getData =
 {this.GetData}/>

在儿童中

 axios.post("tableData/", payload, header)
            .then(response => {
                console.log(response);
                this.props.getData ()
              })
            .catch(error => {
              console.log(error);
        })

在提交/删除中获得API的结果后，调用获取数据。

也请避免使用key={Math.random()}，而应使用数据库ID作为密钥。

Answer 2

最简单的解决方案是调用setState（）。您可以仅在handleSubmit和handleDelete方法中添加this.setState（）调用。像

handleSubmit(){
    this.PostData();
    this.props.action();
    this.setState({something:something})
  }

每次调用setState时，组件都会重新渲染

Answer 3

好的，我知道您想要的很简单。在您的子组件中添加一个额外的道具。

class ParentComp extends Component{
 state={
   something:null
 }
reloadTable=()=>{
   this.setState(something:something);
} 
render(){ 
   return(
      <ChildComp actionForReloadTable={this.reloadTable}....></ChildComp>
     ) 
}

，然后在您的ChildComponent的handleSubmit方法中，以以下方式添加此功能 actionForReloadTable ：

handleSubmit(){
  this.PostData();
  this.props.action();
  this.props.actionForReloadTable();
}

用户将新行保存到数据库后如何重新加载表

3 个答案: