javascript - 从 componentDidMount 中的 api 获取数据返回 null

问题描述

我正在尝试以componentDidMount反应的生命周期方法获取数据，但我没有得到它。

我的方法是：

  componentDidMount() {
    const { taskId } = this.props
    getTask(taskId)
    .then(data => {
        console.log(data);
      this.setState({task: data});
    })
  }

我的api是：

  export const getTask = (unique_id) =>  {
  console.log(unique_id)
    return fetch('https://punctual-backend-staging.herokuapp.com/api/v1/homeowner_tasks/'+ unique_id).then(res => { 
    return res.json();
    });
  };

这是我的整个组件：

import React, { Component } from 'react'
import { getTask } from '../../modules/clients';
import ClientTaskShow from '../../components/tasks/ClientTaskShow'

class ClientTaskShowContainer extends Component {
  constructor(props) {
    super(props)

    this.state = {
      messageModalOpen: false,
      selectedPartnerId: null,
      task:{}
    }
  }

  componentDidMount() {
      console.log("hello")
    const { taskId } = this.props
    getTask(taskId)
    .then(data => {
        console.log(data);
      this.setState({task: data});
    })
  }
  render() {
    const taskSelected = this.state.task;
    console.log(taskSelected)
        return (
            <ClientTaskShow 
                task={taskSelected}
            />
        )   
  }
}

export default ClientTaskShowContainer;

调用clienttaskShowContainer的代码：

import React from 'react'
import Head from 'next/head'
import Layout from '../../components/Layout'
import ClientTaskShowContainer from '../../containers/tasks/ClientTaskShowContainer'
import requireAuth from '../../lib/requireAuth'

const ClientTasksShow = ({ query }) => {
  const { taskId } = query
  return (
    <Layout fluid fullHeight clientTaskHeader='true'>
      <Head>
        <title>Client Task Details | Punctual</title>
      </Head>
      <ClientTaskShowContainer taskId={taskId} />
    </Layout>
  )
}

ClientTasksShow.getInitialProps = async ({ query }) => ({
    query
  })

export default requireAuth(ClientTasksShow)

我认为它甚至没有触及 API。虽然它在我重新启动服务器时命中但不会再次命中。我无法复制问题。在某些站点上，我发现我们应该将.then其用于 API 调用，其他人说我们无法在 componentDidMount 中的 API 调用中传递边界。对此的确切解决方案是什么。请帮忙。提前致谢。

标签： javascriptreactjsapi

javascript - 从 componentDidMount 中的 api 获取数据返回 null

问题描述

解决方案

推荐阅读