將數據發送到api後更新反應狀態

Question

因此，我似乎打破了反應的方式。我目前已經設置了主應用程序容器（其中包含所有路由器邏輯）將從初始狀態獲取API中的所有數據。

我傳下功能：

createPage(page) { 
    console.log('submitted') 
    instance.post('/admin/createPage',page).then((response) => { 
     console.log(response) 
    }).catch((error) => { 
     console.log(error) 
    }) 
    } 

的API接受的數據，我看到它更新數據庫。

我的問題是：在我提交數據後，容器組件不會更新它保存所有數據的狀態。

例如，這是應用程序容器：

import React, { Component } from 'react'; 
import { 
    BrowserRouter as Router, 
    Route 
} from 'react-router-dom' 
import axios from 'axios' 

import Header from '../components/Header' 

import Dashboard from './Dashboard' 
import AddEditPage from './AddEditPage' 

const instance = axios.create({baseURL: 'http://localhost:1337'}) 



class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     "pages": [] 
    } 
    this.createPage = this.createPage.bind(this) 
    } 

    componentDidMount() { 
    this.getPages() 
    } 

    getPages() { 
    instance.get('/admin/listPages') 
     .then(
     (response) => { 
      this.setState(
      { 
       "pages": response.data 
      } 
     ) 
     }) 
     .catch((error) => {console.log(error)}) 
    } 

    createPage(page) { 
    console.log('submitted') 
    instance.post('/admin/createPage',page).then((response) => { 
     console.log(response) 
    }).catch((error) => { 
     console.log(error) 
    }) 
    } 

    render() { 
    return (
     <Router> 
     <div className="Router"> 
      <div className="Navbar"> 
      <Header /> 
      </div> 
      <div className="Wrapper"> 
      <Route exact path="/" render={() => (
       <Dashboard pages={this.state.pages} /> 
      )} /> 
      <Route path="/admin/new-page" render={() => (
       <AddEditPage createPage={this.createPage} /> 
      )} /> 
      <Route path="/admin/edit-page/:id" render={() => (
       <AddEditPage /> 
      )} /> 
      </div> 
     </div> 
     </Router> 

    ); 
    } 
} 

export default App; 

目前，我通過設置window.href提交後解決此問題得到。這會重新加載整個頁面（不理想）。

handleSubmit(e) { 
    e.preventDefault(); 
    this.props.createPage(this.state) 
    //TODO: update main container state of page titles, then redirect 
    window.location = "/" 

    } 

Answer 1

this.getPages只被要求componentDidMount - 這樣的組件最初安裝後，您的狀態是永遠不會更新。您需要創建新頁面後，再次撥打this.getPages：

createPage(page) { 
    console.log('submitted') 
    instance.post('/admin/createPage',page).then((response) => { 
    console.log(response); 

    // after page is created, refetch pages 
    // this.getPages calls setState and your component will re-render 
    this.getPages(); 
    }).catch((error) => { 
    console.log(error); 
    }) 
} 

，或者如果你喜歡，你可以在你的handleSubmit IT連鎖：

handleSubmit(e) { 
    e.preventDefault(); 
    this.props.createPage(this.state).then(this.getPages); 
}