将RECT-DatePicker Date状态推至另一个React组件

Question

我遇到了一个问题，可以找到一种方法可以可靠地存储从react-datepicker的日期，并通过URL参数将该状态导出到另一个组件的状态。

要提供一些上下文，我有两个组成部分。 Picker.js组件包含React-datePicker日历，以及一个称为“ delayguage”的单独组件，该组件使用API​​调用动态绘制Google图表声音。唯一的问题是，此API调用具有一个动态参数，称为{date}，此{date}参数必须来自先前选择的datepicker日期。

这是下面我的datepicker代码。我遇到的问题是我一直在 当我尝试在日历日期之后尝试调用handlesubmit（）时（onselect）时，“ uckulting typeerror：event.target是未定义的”。

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import {Link, useNavigate} from "react-router-dom"

import "react-datepicker/dist/react-datepicker.css";

// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';

const Picker = () => {
    const navigate = useNavigate(); 

    const [startDate, setStartDate] = useState(new Date());

    const handleChange = (event) => {
      setStartDate(event.target.value)

      console.log(startDate)
    }

    const handleSubmit = (event) =>{
      event.preventDefault();
      navigate(`/guage/${startDate}`) //upon the call of handleSubmit, a redirect should call the guage component to be rendered, taking the startDate as a URL parameter

    } 
    return (
      <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} onSelect={handleChange}/>
    );
  };

export default Picker

第二个问题是，我需要找到一种方法来输入从日历中选择的日期，并使用API​​调用到后端，以检索我的仪式的数据。它目前只能获取JSON，但是从picker.js组件中选择的每个日期获取适当的JSON的能力一直让我头痛。

这是我的delayguage.js代码：

import React from "react";
import { Chart } from "react-google-charts";
import axios from "axios";
import {  QueryClient, QueryClientProvider, useQuery } from 'react-query';
import { Link, useLocation, useParams } from "react-router-dom";

async function fetchPosts() {

  const {data} = await axios.get(
    "http://172.16.10.100:5004/reports/{date}/agencies"
  );
  const parsedData = data.agencies[0].kpis.map((r) => [
    "Delay Index",
    r.kpi_value * 100
  ]);

  return [["Label", "Value"], ...parsedData];
}

因此，总而言之，该项目中有两个问题。第一个是将所选日期存储在datePicker中的一种方法，第二个是解析所述日期中所选日期的一种方法。 172.16.10.100:5004/reports/ {date}/agencies”。这将返回包含从数据库检索的对象的JSON（已经设置了后端）。

Answer 1

您的 onChange 是否会以 startDate 将datePicker输入的价值存储的预期行为。将 OnSelect 传递给＆lt; datePicker/＆gt; 导致问题作为 event 参数传递给 OnSelect 实际上只是更新的输入值（如果您的 console.log（event））可以看到此。 ＆lt; datePicker /＆gt; < /code>组件只是输入组件，而不是整个表单。您应该将组件以形式包裹，然后将 handlesubmit 传递给表单的 onsubmit prop。 。

对于问题的第二部分，请研究React路由器的URL参数（指南，，，<，< a href =“ https://v5.reactrouter.com/web/example/url-params” rel =“ nofollow noreferrer”>示例）。您可以使用 useParams（）挂钩从URL获取 startDate ，并在API调用中使用它。