Question

我试图将数据传递给带有react路由器的组件。我已经测试过终点是否正常工作，所以它不是服务器问题。

这是我的函数，它应该根据ID参数抓取页面数据：

    instance.get(`/admin/page/${id}`).then((response) => {
      return response.data
    }).catch((error) => {
      console.log(error)
    })
  }

我的反应路线：

    <Route path="/admin/edit-page/:id" render={ (props) => (
      <AddEditPage {...props} page={this.setPage(props.match.params.id)} />
    )} />

但是当我转到

时页面会回来

本地主机：3000 /管理/编辑页/ 1

如果console.log(response.data)函数中有setPage，我可以在控制台中看到正确的数据。这太奇怪了。

我不应该return response.data ??

这是整个App.js容器文件：

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)
    this.getPages = this.getPages.bind(this)
    this.setPage = this.setPage.bind(this)

  }

  componentDidMount() {
    this.getPages()
  }

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

  createPage(page) {
    instance.post('/admin/createPage',page).then((response) => {
      this.getPages();
      //TODO: Create my own history object as props, then use router to push route.
      window.location.replace('/')
    }).catch((error) => {
      console.log(error)
    })
  }

  setPage(id) {
    instance.get(`/admin/page/${id}`).then((response) => {
      return response.data
    }).catch((error) => {
      console.log(error)
    })
  }

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

    );
  }
}

export default App;

Answer 1

在您的示例中，this.setPage()是一个异步函数。因此，返回值将是未定义的。有几种不同的方法可以解决这个问题。一种方法是设置“页面”与设置“页面”的方式相同。也就是说，使用状态。

Answer 2

您似乎调用一个函数，而不是传递对它的引用：

 page={this.setPage(props.match.params.id)}

这几乎绝对不是你想要做的。

Answer 3

经过几个小时尝试不同的事情后，我终于开始工作了。这就是。

我没有进行另一次API调用，而是决定在状态中使用已存储的页面数据。我把它作为道具传递到编辑页面：

    <Route path="/admin/edit-page/:id" render={ (props) => (
      <AddEditPage {...props} pages={this.state.pages} />
    )} />

然后在AddEditPage组件中我做了：

  componentWillReceiveProps(nextProps) {
    const page = nextProps.pages[this.props.match.params.id]
    this.setState(page)
  }

我仍然不知道什么是更好的速度。重用状态中的数据，或者为单个对象进行另一个api调用。

数据回复未定义的反应

3 个答案: