javascript - 在数据发送到 api 后更新 react 状态

Question

看来我打破了 React 的方式。我目前的设置是，主 App 容器(包含所有路由器逻辑)将在其初始状态下从 API 获取所有数据。

我传递函数:

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

API 接受数据，我看到它更新了数据库。

我的问题是:在我提交数据后，容器组件不会更新它保存所有数据的状态。

例如，这是 App 容器:

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 中:

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