從componentDidMount中的api獲取數據返回null

Question

我正在嘗試在react的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調用中傳遞邊界。 確切的解決方案是什么？ 請幫忙。 提前致謝。

Answer 1

其實它的工作

console.log(data)從api返回錯誤消息

Answer 2

該代碼有效

//調用組件

import React from "react";
import CallComp from "./CallComp";
import ReactDOM from "react-dom";

function App() {
  return (
    <div className="App">
      <CallComp taskId={"7693fbf81a33"} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

//子組件

import React, { Component } from "react";
import ClientTaskShow from "./ClientTaskShow";

class ClientTaskShowContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      task: {}
    };
  }

  componentDidMount() {
    const { taskId } = this.props;
    fetch(
      `https://punctual-backend-staging.herokuapp.com/api/v1/homeowner_tasks/${taskId}`
    )
      .then(response => response.json())
      .then(data => this.setState({ task: data }))
      .catch(error => console.log("the error is", error));
  }
  render() {
    const taskSelected = this.state.task;
    console.log("task selected is ", taskSelected);
    return (
      <div>
        {Object.keys(taskSelected).length ? (
          <ClientTaskShow task={taskSelected} />
        ) : (
          <div>No data to show</div>
        )}
      </div>
    );
  }
}

export default ClientTaskShowContainer;

//演示ClientTaskShow

import React from "react";

const ClientTaskShow = ({ task }) => {
  return <h1>{task.unique_code}</h1>;
};

export default ClientTaskShow;

Answer 3

您應該從函數返回Promise以了解api請求是否已解決

嘗試這個：

export const getTask = (id) => {
    return new Promise(function (resolve, reject) {
        fetch('https://punctual-backend-staging.herokuapp.com/api/v1/homeowner_tasks/' + id).then((res) => {
            resolve(res.json())
        })
    });
}

並這樣調用：

componentDidMount() {
    getTask(1).then((data)=>{
        console.log(data);
    });  
}

您可以使用id替換參數

希望這可以幫助。

從componentDidMount中的api獲取數據返回null

問題描述

3 個解決方案

解決方案1
1 2019-04-18 06:51:46

解決方案2
1 已采納 2019-04-18 06:57:24

解決方案3
0 2019-04-18 06:52:15

從componentDidMount中的api獲取數據返回null

問題描述

3 個解決方案

解決方案1 1 2019-04-18 06:51:46

解決方案2 1 已采納 2019-04-18 06:57:24

解決方案3 0 2019-04-18 06:52:15

解決方案1
1 2019-04-18 06:51:46

解決方案2
1 已采納 2019-04-18 06:57:24

解決方案3
0 2019-04-18 06:52:15