时间戳

首页 > 解决方案 > 在 ReactJS 中获取时自定义日期查询

javascript - 在 ReactJS 中获取时自定义日期查询

问题描述

API的链接-链接

我提供的链接以 dd/mm/yyyy 格式的日期结尾。它看起来像这样（http://fathomless-shelf-5846.herokuapp.com/api/schedule?date=%227/8/2019%22）。您可以替换最后的日期以获得不同日期的结果。如果您想尝试一下，在某些日期它会返回一个空白 json。因此，请尝试各种日期。

我正在使用 reactJS。现在，我的问题是我想从用户那里获取一个自定义输入日期，然后将其插入上面的链接中，然后获取该日期的数据。但我对获取查询知之甚少。所以请提供一些关于如何做到这一点的建议。

我在下面粘贴我的 App.js 代码。不要被那个代理 URL 弄糊涂了。我将它用于 CORS 问题。

import React,{useEffect,useState} from 'react';
import './App.css';
import Calendar from 'react-calendar';
import Header from './components/Header';

const App=()=> {
  const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
  const targetUrl = 'http://fathomless-shelf-5846.herokuapp.com/api/schedule?date=%227/8/2019%22';

  const [allData,setData]=useState([]);

  useEffect(()=>{
    getData();
  },[]);

  const getData =  async () =>{
    const response= await fetch(proxyUrl + targetUrl);
    const data=await response.json();
    setData(data);
    console.log(data);
  }

  return( 
    <div className="App">
      <Calendar />
      {allData.map(dta=>(
        <Header head={dta.description} st={dta.start_time} et={dta.end_time}/>
      ))}
    </div>
  );
}

export default App;

标签： javascriptreactjsfetch

解决方案

您需要插入一个输入，例如

<input type="date" onChange={v => callBackEnd(v.target.value)}/>

并让你的函数调用

 const callBackEnd = async (v) =>{

let result = await fetch(targetUrl+ new Intl.DateTimeFormat('default', {
  day: 'numeric',
  month: 'numeric',
  year: 'numeric'
}).format(v)
const data=await response.json();

 setData(data);

}

你需要从 targetUrl 中删除日期才能工作

推荐阅读