Javascript 从componentDidMount中的api获取数据返回null_Javascript_Reactjs_Api

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

javascript reactjs api

Javascript 从componentDidMount中的api获取数据返回null,javascript,reactjs,api,Javascript,Reactjs,Api,我试图在react的componentDidMountlifecycle方法中获取数据，但没有得到它我的方法是： componentDidMount() { const { taskId } = this.props getTask(taskId) .then(data => { console.log(data); this.setState({task: data}); }) } export const ge

我试图在react的

componentDidMount

lifecycle方法中获取数据，但没有得到它

我的方法是：

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

  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;

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是：

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

  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;

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)

这是我的全部组件：

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

  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;

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)

import React，{Component}来自“React”
从“../../modules/clients”导入{getTask}；
从“../../components/tasks/ClientTaskShow”导入ClientTaskShow
类ClientTaskShowContainer扩展组件{
建造师（道具）{
超级（道具）
此.state={
messageModalOpen:false，
selectedPartnerId:null，
任务：{}
}
}
componentDidMount（）{
log（“你好”）
const{taskId}=this.props
getTask（任务ID）
。然后（数据=>{
控制台日志（数据）；
this.setState（{task:data}）；
})
}
render（）{
const taskSelected=this.state.task；
console.log（已选择任务）
返回(
)   
}
}
导出默认ClientTaskShowContainer；

从何处调用clienttaskShowContainer的代码：

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

  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;

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)

从“React”导入React
从“下一个/头”导入头
从“../../components/Layout”导入布局
从“../../containers/tasks/ClientTaskShowContainer”导入ClientTaskShowContainer
从“../../lib/requireAuth”导入requireAuth
const clienttaskshow=（{query}）=>{
const{taskId}=query
返回(
客户任务详细信息|准时
)
}
ClientTasksShow.getInitialProps=async（{query}）=>({
查询
})
导出默认请求权限（客户端任务显示）

我认为它甚至没有达到API标准。虽然它击中一次，我重新启动服务器，但不会再次。我无法复制这个问题。在一些站点，我发现我们应该使用

。然后

进行API调用，其他站点则表示我们无法在componentDidMount中通过API调用的周界。这个问题的确切解决方案是什么。请帮忙。提前谢谢。

实际上它可以工作了

console.log（数据）

返回api发出的错误消息

console.log（data）

从api返回错误消息

您应该从函数返回承诺，以知道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替换参数

希望这有帮助。

您应该返回函数的承诺，以了解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替换参数

希望这有帮助。

此代码正在运行

//调用组件

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);

从“React”导入React；
从“/CallComp”导入CallComp；
从“react dom”导入react dom；
函数App（）{
返回(
);
}
const rootElement=document.getElementById（“根”）；
render（，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;

import React，{Component}来自“React”；
从“/ClientTaskShow”导入ClientTaskShow；
类ClientTaskShowContainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
任务：{}
};
}
componentDidMount（）{
const{taskId}=this.props；
取回(
`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（“错误是”，error））；
}
render（）{
const taskSelected=this.state.task；
console.log（“已选择任务”，已选择任务）；
返回(
{Object.keys（taskSelected）.长度(
) : (
没有数据显示
)}
);
}
}
导出默认ClientTaskShowContainer；

//演示客户端任务演示

import React from "react";

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

export default ClientTaskShow;

从“React”导入React；
const ClientTaskShow=（{task}）=>{
返回{task.unique_code}；
};
导出默认ClientTaskShow；

此代码正在运行

//调用组件

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);

从“React”导入React；
从“/CallComp”导入CallComp；
从“react dom”导入react dom；
函数App（）{
返回(
);
}
const rootElement=document.getElementById（“根”）；
render（，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;

import React，{Component}来自“React”；
从“/ClientTaskShow”导入ClientTaskShow；
类ClientTaskShowContainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
任务：{}
};
}
componentDidMount（）{
const{taskId}=this.props；
取回(
`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（“错误是”，error））；
}
render（）{
const taskSelected=this.state.task；
console.log（“已选择任务”，已选择任务）；
返回(
{Object.keys（taskSelected）.长度(
) : (
没有数据显示
)}
);
}
}
导出默认ClientTaskShowContainer；

//演示客户端任务演示

import React from "react";

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

export default ClientTaskShow;

从“React”导入React；
const ClientTaskShow=（{task}）=>{
返回{task.unique_code}；
};
导出默认ClientTaskShow；

它真的返回了

null

？如果是这样，API是否甚至返回JSON？客户机是否真正使用了正确的API？

fetch

reject（附加一个

.catch

到它！）吗？我想即使是comontdimount也不起作用或者被调用了，你怎么知道的？

“hello”

是否被记录？否，它不是日志能否为唯一id提供一个值，该id作为查询参数在api中传递，它是否真的返回了

null

？如果是这样，API是否甚至返回JSON？客户机是否真正使用了正确的API？

fetch

reject（附加一个

.catch

到它！）吗？我想即使是comontdimount也不起作用或者被调用了，你怎么知道的？

“有帮助吗