2

So it seems I broke the React way of things. I currently have things setup that the main App container (which contains all the router logic) will fetch all data from the API on it's initial state.

I pass down the function:

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

The API accepts the data and I see it update the database.

My issue is: after I submit the data, the container component doesn't update it's state which holds all the data.

For example, this is the App container:

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;

Currently, I get around this issue by setting the window.href after submit. This reloads the whole page (not ideal).

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

  }

1 Answer 1

2

this.getPages is only being called on componentDidMount - so after the component initially mounts, your state is never updated. You need to call this.getPages again after creating the new page:

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);
  })
}

or if you prefer you can chain it in your handleSubmit:

handleSubmit(e) {
  e.preventDefault();
  this.props.createPage(this.state).then(this.getPages);
}
2
  • I've tried that originally, but doesn't seem to work. The console.log(response) doesn't seem to be called either. I tried to chain it in the handleSubmit and get this error: TypeError: Cannot read property 'then' of undefined
    – Dileet
    Jul 5, 2017 at 20:01
  • For some reason, the data is going through the api, but .then is being called.
    – Dileet
    Jul 5, 2017 at 20:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.