在反应中返回未定义的数据答案

【问题标题】：Data coming back as undefined in react在反应中返回未定义的数据
【发布时间】：2017-07-07 13:24:04
【问题描述】：

我正在尝试将数据向下传递到带有反应路由器的组件。我已经测试过端点可以正常工作，所以这不是服务器问题。

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

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

还有我的 React 路线：

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

但是当我转到时页面返回未定义

localhost:3000/admin/edit-page/1

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

难道我不应该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;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

【讨论】：

我确实尝试过，但无法在函数或构造函数中访问 this.props.match.params.id。
设置页面是否需要在App级别？可以在 AddEditPage 内吗？
嗯，我想可能是这样，但是我必须再次包含 axios。这有关系吗？我认为将它放在 App 容器中会很好。

【解决方案2】：

看起来您正在调用一个函数，而不是传递对它的引用：

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

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

【讨论】：

【解决方案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)
  }

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

【讨论】：